ajxa常见用法简介

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);
	    		});
	    	});
	    });

测试结果如下：


方式三:请求为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);
		}
		
	});
	
}