欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ajxa常见用法简介

程序员文章站 2023-09-04 20:07:39
> qq_42420425的博客... > ajxa常见用法 --> ajxa常见用法 一、服务端数据格式 1.自定义po类 pac...

    ajxa常见用法

    一、服务端数据格式

    1.自定义po类

    package com.hbut.ssm.po;
     
    /**
     * pojo类
     *
     */
    public class children {
     
    	private string name;
    	private integer age;
    	private string gender;
    	
    	public children(string name, integer age, string gender) {
    		super();
    		this.name = name;
    		this.age = age;
    		this.gender = gender;
    	}
    	public string getname() {
    		return name;
    	}
    	public void setname(string name) {
    		this.name = name;
    	}
    	public integer getage() {
    		return age;
    	}
    	public void setage(integer age) {
    		this.age = age;
    	}
    	public string getgender() {
    		return gender;
    	}
    	public void setgender(string gender) {
    		this.gender = gender;
    	}
    	
    }

    2.controller准备需要返回的数据

        //测试json的输出
        @requestmapping(value="/getchildrenlist")
        public @responsebody list getchildrenlist(httpservletrequest request){
        	system.out.println("获取前端的参数:"+request.getparameter("name"));
        	list childrenlist= new arraylist();
        	childrenlist.add(new children("张三", 25, "男"));
        	childrenlist.add(new children("李四", 28, "男"));
        	childrenlist.add(new children("小红", 22, "女"));
        	
        	return childrenlist;
        }

    二、ajax请求并解析数据

    方式1:不带参数 $ajax(url,callback),即第一个参数是请求的url,第二个参数是回调用函数,json数据封装在result,需要对result的json数据进行解析

    	    $(document).ready(function(){
    	    	$("button").click(function(){
    	    		$.ajax({url:"https://localhost:8080/ssm01/getchildrenlist.action",
    	    			success:function(result){
    	   		    //eval函数解析json数据
    	    			var array=eval(result);
    	    			var texts="解析json数据如下:
    ";
    	    			for(var i=0;i";
    	    			}
    	    			$("#p1").html(texts);
    	    		}});
    	    	});
    	    });

    方式2:带参数 $.post(url,data,callback),即第一个参数是请求的url,第二个参数是请求参数,第三个参数是回调用函数,json数据封装在result,需要对result的json数据进行解析

    	    $(document).ready(function(){
    	    	$("button").click(function(){
    	    		$.post("https://localhost:8080/ssm01/getchildrenlist.action",{
    	    			name:"菜鸟教程",
    	    			url:"https://www.runoob.com"
    	    		},
    	    		function(data,status){
    	    		    //eval函数解析json数据
    	    			var array=eval(data);
    	    			var texts="解析json数据如下:
    ";
    	    			for(var i=0;i";
    	    			}
    	    			$("#p1").html(texts);
    	    		});
    	    	});
    	    });

    测试结果如下:

    ajxa常见用法简介
    方式三:请求为json方式,请求的参数格式json,返回的是json(与上面请求url不一样,原理类似)

    //请求json,输出是json
    function requestjson(){
    	
    	$.ajax({
    		type:'post',
    		url:'${pagecontext.request.contextpath }/requestjson.action',
    		contenttype:'application/json;charset=utf-8',
    		//数据格式是json串,商品信息
    		data:'{"name":"手机","price":999}',
    		success:function(data){//返回json结果
    			alert(data);
    		}
    		
    	});
    	
    	
    }

    方式四:请求为key、value方式,返回的是json,(与上面请求url不一样,原理类似)

    //请求key/value,输出是json
    function responsejson(){
    	
    	$.ajax({
    		type:'post',
    		url:'${pagecontext.request.contextpath }/responsejson.action',
    		//请求是key/value这里不需要指定contenttype,因为默认就 是key/value类型
    		//contenttype:'application/json;charset=utf-8',
    		//数据格式是json串,商品信息
    		data:'name=手机&price=999',
    		success:function(data){//返回json结果
    			alert(data.name);
    		}
    		
    	});
    	
    }