jQuery ajax局部刷新

栏目: jQuery · 发布时间: 7年前

1.调用方式

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
$(function(){
	$.ajax({
		url:"bookAction", //请求地址
		type:"post", //设置post提交
		success:function(data){
		//(1)将收到的Json字符串转换成数组对象
		var bookArray = eval("("+data+")");
		//(2)拼接字符串
		var str ="<tr><td>bookid</td><td>bookname</td><td>pinyin</td><td>goryid</td><td>author</td><td>price</td><td>image</td><td>publishing</td><td>bdesc</td><td>state</td><td>tetime</td><td>volume</td>"
		//遍历bookArray
		$.each(bookArray,function(index,element){
			str = str + "<tr><td>"+element.bookid+"</td><td>"+element.bookname+"</td><td>"+element.pinyin+"</td><td>"+element.goryid+"</td><td>"+element.author+"</td><td>"+element.price+"</td><td>"+element.image+"</td><td>"+element.publishing+"</td><td>"+element.bdesc+"</td><td>"+element.state+"</td><td>"+element.tetime+"</td><td>"+element.volume+"</td>"
		});
		//(3)将拼接好的html字符串放到指定的元素中
		$('#tab1').html(str);
		//$("table").bgcolor();
		},
		dateType:"text"
	});	

});

</script>
</head>
<body>
<table width="100%" border="1" id="tab1">

</table>
</body>
</html>

1.2 JQuery的俩种调用方式

$.get(servlet,data,callback);

$.post(servlet,data,callback);

2.重点是怎样将集合转换成JSON格式，怎样将JSON字符串转换成数组对象。

（1）将集合转JSON

//将集合转换成JSON格式
		 ObjectMapper om = new  ObjectMapper();
		 String bookJson = om.writeValueAsString(bookList);

（2）将数据响应到前端

//ajax流程：响应到前端
		PrintWriter out = resp.getWriter();
		out.write(bookJson);
		out.flush();
		out.close();

（3）将JSON字符串转数组对象

//(1)将收到的Json字符串转换成数组对象
		var bookArray = eval("("+data+")");

3.XML代码拼接，遍历循环

//(2)拼接字符串
		var str ="<tr><td>bookid</td><td>bookname</td><td>pinyin</td><td>goryid</td><td>author</td><td>price</td><td>image</td><td>publishing</td><td>bdesc</td><td>state</td><td>tetime</td><td>volume</td>"
		//遍历bookArray
		$.each(bookArray,function(index,element){
			str = str + "<tr><td>"+element.bookid+"</td><td>"+element.bookname+"</td><td>"+element.pinyin+"</td><td>"+element.goryid+"</td><td>"+element.author+"</td><td>"+element.price+"</td><td>"+element.image+"</td><td>"+element.publishing+"</td><td>"+element.bdesc+"</td><td>"+element.state+"</td><td>"+element.tetime+"</td><td>"+element.volume+"</td>"
		});
		//(3)将拼接好的html字符串放到指定的元素中
		$('#tab1').html(str);
		},

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

黑客与画家

[美] Paul Graham / 阮一峰 / 人民邮电出版社 / 2013-10 / 69.00元

本书是硅谷创业之父Paul Graham 的文集，主要介绍黑客即优秀程序员的爱好和动机，讨论黑客成长、黑客对世界的贡献以及编程语言和黑客工作方法等所有对计算机时代感兴趣的人的一些话题。书中的内容不但有助于了解计算机编程的本质、互联网行业的规则，还会帮助读者了解我们这个时代，迫使读者独立思考。本书适合所有程序员和互联网创业者，也适合一切对计算机行业感兴趣的读者。一起来看看《黑客与画家》这本书的介绍吧!

码农工具

RGB转16进制工具

RGB HEX 互转工具