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

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

查看所有标签

猜你喜欢:

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

算法分析导论(第2版)(英文版)

算法分析导论(第2版)(英文版)

[美]Robert Sedgewick(罗伯特•塞奇威克)、[美]Philippe Flajolet(菲利普•弗拉若莱) / 电子工业出版社 / 2015-6 / 128.00元

《算法分析导论(第2版)(英文版)》全面介绍了算法的数学分析中所涉及的主要技术。涵盖的内容来自经典的数学课题(包括离散数学、初等实分析、组合数学),以及经典的计算机科学课题(包括算法和数据结构)。《算法分析导论(第2版)(英文版)》的重点是“平均情况”或“概率性”分析,书中也论述了“最差情况”或“复杂性”分析所需的基本数学工具。 《算法分析导论(第2版)(英文版)》第 1 版为行业内的经典著......一起来看看 《算法分析导论(第2版)(英文版)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试