day52(ajax,json字符串)

web

json字符串

json字符串:javascript object notaction,是一种轻量级的数据交换格式传输数据(xml传输)
特点:类似于map集合,将数据分成key-value的形式

//json保存数据内容
var arr=["长沙","株洲","湘潭"];
//json保存对内容(假如保存的是一个user对象)
var user={
	"id":"1",
	"name":"张三",
	"sex":"男",
	"age":"20"
}
//json保存集合对象
var users=[
	{
		"id":"1",
		"name":"张三",
		"sex":"男",
		"age":"20"
	},
	{
		"id":"1",
		"name":"张四",
		"sex":"男",
		"age":"21"
	},
	{
		"id":"3",
		"name":"张五",
		"sex":"男",
		"age":"22"
	}
	]
//遍历json集合对象
$(users).each(function(){//each(function())	循环函数,遍历users数组
	//将遍历出来的内容添加到table标签的末尾(append)	append插入到...里中的末尾
	$("table").append("<tr><td>"+this.id+"</td><td>"+this.name+"</td><td>"+this.sex+"</td><td>"+this.age+"</td></tr>");
});

ajax获取json数据

//js页面
$.getJSON("/web12/indexServlet","name=123",callback);
//IndexServlet.java页面
response.setContentType("text/html; charset=UTF-8");
PrintWriter pw=response.getWriter();
String json=JSON.toJSONString(list);//序列化list至json字符串	需要导入fastjson-1.2.13.jar包
pw.print(json);

ajax获取html数据

//使用ajax获取后台返回的html数据(后台拼接了标签)
//会自动将返回的html内容显示到ul标签中
//js页面
//load()可以对返回的html内容进行过滤,比如只想获取内容中a标签中的数据,则直接在servlet链接后面,空格加上标签名即可(如下所示)
$("ul").load("/web12/indexServlet a");
//IndexServlet.java页面
StringBuilder sb=new StringBuilder("");
User user=null;
for(int i=0;;) {
	user=list.get(i);
	sb.append("<li>"+user.getId()+"</li><a href=#>"+user.getName()+"</a><li>"+user.getSex()+"</li><li>"+user.getAge()+"</li>");
	if((++i)==list.size()) {
		break;
	}
}
pw.print(sb);

serializeArray()序列化表单

login2页面

login.js页面
$("input[type='button']").click(function(){	//type=button指的是login页面中type=button属性
	//alert(123);
	//使用ajax提交数据
	/**
	 * 1.获取user的值string name=request.getParameter("user")
	 * 2.获取pass的值
	 * 3.获取sex的值
	 * 4.获取age的值
	 */
	var $inputs=$("input[type='text']").serializeArray();//serializeArray()序列化表单
	alert($inputs);
	//自动将上面获取到的input对象拼接成如下格式:会自动添加&符号
	// "user="+user+"&pass="+pass+"&sex="+sex+"&age="+age
	var $values=$.param($inputs);
	alert($values);
});