jQuery ajax局部刷新

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

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

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

查看所有标签

猜你喜欢:

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

码农书籍

Code Reading

Diomidis Spinellis / Addison-Wesley Professional / 2003-06-06 / USD 64.99

This book is a unique and essential reference that focuses upon the reading and comprehension of existing software code. While code reading is an important task faced by the vast majority of students,......一起来看看《Code Reading》这本书的介绍吧!

码农工具