jQuery ajax局部刷新

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

jQuery ajax局部刷新相关推荐

struts2 jquery ajax 局部刷新遇到的各种问题
我们的网站一开始都是由前台提交表单到action,每次一个小操作整个页面都会刷新,影响用户体验,这次由我实现部分功能的局部刷新,但是初学ajax遇到不少问题 1.我们在struts.xml外扩展了一个 ...
JQuery Ajax局部刷新功能
直接通过一个案例来说明一下Ajax和JQuery的基本用法吧,用户注册时,判断当前用户名是否可用,通过弹窗的形式来通知用户,如果用户起的名字为skh则不允许注册,否则可以,就不加数据库来测试了,太麻烦 ...
ajax提交成功后局部刷新 jq_JQuery ajax局部刷新实例
在我们开发的时候,我们回时常用到javascript实现页面局部刷新,本文我们就和大家分享JQuery ajax局部刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下案例: 描述: 1. 点击登 ...
ajax 局部页面替换innerhtml,ajax jquery 页面局部刷新的不同实现代码
以下示例是学习使用XMLHttpRequest时,实现的页面局部刷新的代码,分享下. 复制代码代码示例: 页面局部刷新功能_www.jbxue.com window.onload = functio ...
JQuery 再谈ajax局部刷新
JQuery 再谈ajax局部刷新. 案例: 描述: 1. 点击登录则弹出登录对话框 2. 如果用户名密码不正确,则提示错误信息 3. 当输入信息正确,则刷新登录信息,显示用户名和退出按钮 4. 点击 ...
利用jquery load 局部刷新数据
<base><style>BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: ...
Ajax局部刷新数据：添加、删除
今天用ajax局部刷新的方式,写了个搜索显示出局部数据和点击删除,页面同样局部更新删除数据异步搜索局部添加 1.盒子显示 2.ajax处理 url请求路径,experiment项目名,UserSer ...
ajax 刷新output,JSF生命周期及AJAX局部刷新
这些时间可能一直得搞JSF...... 呵呵,这个星期天再一次的仔细的研究了一下这个所谓的6个生命周期的运行情况以及所谓的AJAX局部刷新的问题. 看了core JSF里详细描述的JSF的生命周期,基 ...
Ajax局部刷新后，重新加载百度分享
1.问题在使用ajax请求刷新局部页面后,发现百度分享无法正常使用了.初步估计是因为更新了百度分享的那部分页面但没有重新加载百度分享js导致. 2.重新加载百度分享按照上面上面的猜测重新加载了百度 ...

jQuery ajax局部刷新

1.调用方式

1.2 JQuery的俩种调用方式

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

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

jQuery ajax局部刷新相关推荐

最新文章

热门文章

jQuery ajax局部刷新

1.调用方式

1.2 JQuery的俩种调用方式

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

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

jQuery ajax局部刷新相关推荐

最新文章

热门文章

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