使用ajax不刷新页面获取、操作数据
生活随笔
收集整理的這篇文章主要介紹了
使用ajax不刷新页面获取、操作数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在使用jsp或html時，利用ajax達到不刷新頁面就可以獲取、操作數據。
首先上代碼 （html+js）
在此處需要引入jquery插件
<!-- 這是頁面部分 html-->
<body><div style="width:100%;height:30px; float:left"><input type="button" value="查詢" onclick="selAll()"/></div><div style="width:49%;height:500px; border:1px solid red;float:left"><table width="100%" border="1"><tr align="center"><td width="25%">編號</td><td width="25%">姓名</td><td width="25%">年齡</td><td width="25%">操作</td></tr></table><table width="100%" border="1" cellspacing="0" id=" "></table></div><div style="width:49%; border:1px solid red;float:left"><div style="height:250px; border:1px solid red;"><div style="width:100%;float:left;border-bottom:1px solid red; ">新增信息</div><center><table border="1" style="margin-top: 80px;"><tr><td>姓名：</td><td><input id="name"/></td></tr><tr><td>年齡：</td><td><input id="age"/></td></tr><tr><td colspan="2" align="center"><input type="button" value="新增用戶" onclick="addUser()"></td></tr></table></center></div><div style="height:250px; border:1px solid red;"><div style="width:100%;float:left;border-bottom:1px solid red; ">編輯信息</div><center><table border="1" style="margin-top: 80px;"><tr><td>姓名：</td><td><input type="hidden" id="uid"/><input id="uname"/></td></tr><tr><td>年齡：</td><td><input id="uage"/></td></tr><tr><td colspan="2" align="center"><input type="button" value="編輯用戶" onclick="upUser()"></td></tr></table></center></div></div></body>接著是js部分代碼部分，這里有簡單的增刪改查代碼，可完成基本所有功能
<script><!--這里進行查詢所有操作，這里查詢完之后順位添加，可以先清空內容再進行此方法，以保證不重復-->function selAll(){$.ajax( {url:'usersel',type:'post',data: {},datatype : "json",//"xml", "html", "script", "json", "jsonp", "text". success : function(data) {var json=eval('(' + data + ')');$.each(json, function (n, item) {<!--這里進行添加操作-->addRow(n,item)});}});}function addRow(n,item){var val="<tr align='center'>";val=val+"<td width='25%'>"+(n+1)+"</td>";val=val+"<td width='25%'>"+item.name+"</td>";val=val+"<td width='25%'>"+item.age+"</td>";val=val+"<td width='25%'><a href='javascript:editUser("+item.id+");'>編輯</a><a href='javascript:delUser("+item.id+");'>刪除</a></td>";val=val+"</tr>";$("#showdata").append(val);}function addUser(){var nval=document.getElementById("name").value;var aval=document.getElementById("age").value;$.ajax( {url:'useradd',type:'post',data: {name:nval,age:aval },datatype : "json",//"xml", "html", "script", "json", "jsonp", "text". success : function(data) {alert("信息添加成功！");selAll(); }});}//獲取原始數據function editUser(ele){$.ajax( {url:'useredit',type:'post',data: {id:ele },datatype : "json",//"xml", "html", "script", "json", "jsonp", "text". success : function(data) {var json=eval('(' + data + ')');$.each(json, function (n, item) {document.getElementById("uid").value=item.id;document.getElementById("uname").value=item.name;document.getElementById("uage").value=item.age;});}});}function delUser(ele){var flag=confirm("確認刪除信息？");if(!flag){return false;}$.ajax( {url:'userdel',type:'post',data: {id:ele },datatype : "json",//"xml", "html", "script", "json", "jsonp", "text". success : function(data) {alert("信息刪除成功！");selAll(); }});}function upUser(){var uid=document.getElementById("uid").value;var uname=document.getElementById("uname").value;var uage=document.getElementById("uage").value;$.ajax( {url:'userup',type:'post',data: {id:uid,name:uname,age:uage },datatype : "json",//"xml", "html", "script", "json", "jsonp", "text". success : function(data) {alert("信息更新成功！");selAll(); }});}
</script>
最后，在后端的操作中也有需要注意的點
//這里把數據庫查詢后得到的對象進行處理，轉換為json后返回JSONArray jsonArray = JSONArray.fromObject(list);System.out.println(jsonArray);response.setCharacterEncoding("utf-8");response.getWriter().print(jsonArray);
有時候會出現ajax返回一直進入error方法，這里的原因可能是因為接受數據格式的問題，當執行添加之類的操作也可返回一個內容保證數據無誤。
總結
以上是生活随笔為你收集整理的使用ajax不刷新页面获取、操作数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 利用dom4j将实体类转换为对应的xml
- 下一篇： 使用myeclipse的第一步