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

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

查看所有标签

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

深度学习核心技术与实践

深度学习核心技术与实践

猿辅导研究团队 / 电子工业出版社 / 2018-2 / 119.00元

《深度学习核心技术与实践》主要介绍深度学习的核心算法,以及在计算机视觉、语音识别、自然语言处理中的相关应用。《深度学习核心技术与实践》的作者们都是业界一线的深度学习从业者,所以书中所写内容和业界联系紧密,所涵盖的深度学习相关知识点比较全面。《深度学习核心技术与实践》主要讲解原理,较少贴代码。 《深度学习核心技术与实践》适合深度学习从业人士或者相关研究生作为参考资料,也可以作为入门教程来大致了......一起来看看 《深度学习核心技术与实践》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具