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

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

查看所有标签

猜你喜欢:

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

码农书籍

Web安全测试

霍普(Paco Hope)、沃尔瑟(Ben Waltber) / 傅鑫 / 清华大学出版社 / 2010-3 / 39.00元

《Web安全测试》内容简介：在你对Web应用所执行的测试中，安全测试可能是最重要的，但它却常常是最容易被忽略的。《Web安全测试》中的秘诀演示了开发和测试人员在进行单元测试、回归测试或探索性测试的同时，如何去检查最常见的Web安全问题。与即兴的安全评估不同的是，这些秘诀是可重复的、简洁的、系统的——可以完美地集成到你的常规测试套装中。《Web安全测试》中的秘诀所覆盖的基础知识包括了从观察客......一起来看看《Web安全测试》这本书的介绍吧!

码农工具