Ajax實(shí)現(xiàn)動(dòng)態(tài)顯示并操作表信息的方法
更新時(shí)間：2018年08月20日 15:48:43 作者：_遇見(jiàn)_
今天小編就為大家分享一篇Ajax實(shí)現(xiàn)動(dòng)態(tài)顯示并操作表信息的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
在jsp連接數(shù)據(jù)庫(kù)訪問(wèn)并顯示數(shù)據(jù)庫(kù)信息時(shí)，使用Ajax利用json對(duì)象會(huì)在頁(yè)面不刷新的情況下獲取到數(shù)據(jù)。但若是要顯示數(shù)據(jù)庫(kù)表中的信息，就需要?jiǎng)討B(tài)的生成表的行以及單元格。并且對(duì)每一行的操作也是需要?jiǎng)討B(tài)綁定的。
今天分享給各位的是完成在對(duì)數(shù)據(jù)庫(kù)表信息的顯示、增加、刪除、修改。顯示時(shí)通過(guò)用HTML代碼來(lái)控制table行的增加。修改和刪除是通過(guò)button的onclick()事件完成的。onclick()的參數(shù)也是動(dòng)態(tài)改變的，這樣的話在操作時(shí)就可以知道是要對(duì)哪一行進(jìn)行操作了。修改的方法中又用到修改HTML代碼使普通<td>變?yōu)?lt;input>并獲取到原始值作為輸入框的默認(rèn)值，在輸入框失去焦點(diǎn)后自動(dòng)保存數(shù)據(jù)。并再把<input>變?yōu)?lt;td>
代碼很詳細(xì)，希望能對(duì)你有所幫助。
js文件內(nèi)容如下：
$(function () {
$.ajaxSetup({
async:false
});
var url = "/Task/Fenlei"; //servlet的url
data = {};
data.flag = "all";
$.post(url,data,function (result) {
for(var i=0;i<result.getAll.length;i++){
var id = result.getAll[i].fenlei_Id;
var name = result.getAll[i].fenlei_Name;
var newrow = "<tr id='tr"+id+"'><td>"+result.getAll[i].fenlei_Id+"</td><td id='td"+id+"'>"+result.getAll[i].fenlei_Name+
"</td><td><button onclick='del("+id+")''>刪除</button><button onclick='edit("+id+")'>修改</button></td></tr>"
$("#AllInfo tr:last").after(newrow);
}
},"json");
$("#add").click(function () {
addData={};
var name = $("#name").val();
addData.name = name;
addData.flag = "add";
$.post(url,addData,function (result) {
var id = result.aFenlei.fenlei_Id;
var name = result.aFenlei.fenlei_Name;
var newrow = "<tr id='tr"+id+"'><td>"+result.aFenlei.fenlei_Id+"</td><td id='td"+id+"'>"+result.aFenlei.fenlei_Name+
"</td><td><button onclick='del("+id+")'>刪除</button><button onclick='edit("+id+")'>修改</button></td></tr>"
$("#AllInfo tr:last").after(newrow);
},"json");
});
});
function del(id) {
console.log(id);
var url = "/Task/Fenlei";
delData = {};
delData.flag = "delete";
delData.id = id;
$.post(url,delData,function (result) {
if(result) {
alert("刪除成功");
$("#tr"+id).remove();
} else {
alert("刪除失敗");
}
},"json");
};
function edit(id) {
var url = "/Task/Fenlei";
editData = {};
editData.flag = "update";
var oldname = $("#td"+id).text();
$("#td"+id).html("<input type='text'class='Input' id='new' name='FenleiName' value='"+oldname+"'/>");
$("#new").blur(function () {
var newname = $(".Input").val();
editData.newname = newname;
console.log(newname);
$("#td"+id).html("<td id='td"+id+"'>"+newname+"</td>");
$.post(url,editData,function(result){
if(result) {
alert("修改成功");
} else {
alert("修改失敗");
}
},"json");
});
}
jsp頁(yè)面代碼如下：
<%@include file="../inc/top.jsp"%>
<script src="Fenlei.js"></script>
<div class="Classify">
<h3 align="center">項(xiàng)目管理信息表</h3>
<div class="divBack">
<img src="#" />
</div>
<div class="divAdd">
分類名稱：<input type="text" id="name"/>
<button type="button" class="btn-primary" id="add">添加</button>
</div>
<table class="table"id="AllInfo">
<tr>
<th>分類Id</th>
<th>分類名稱</th>
<th>操作</th>
</tr>
</table>
</div>
<%@include file="../inc/bottom.jsp"%>
處理的servlet內(nèi)容如下：
public class FenleiServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String name = request.getParameter("name"); //項(xiàng)目分類名稱
String flag = request.getParameter("flag");
String id = request.getParameter("id"); //項(xiàng)目分類Id
FenleiService cs = new FenleiService();
JSONObject json = new JSONObject();
if("all".equals(flag)) {
List<FenleiBean> list = cs.getAll(); //獲取所有的項(xiàng)目分類信息
json.put("getAll",list);
response.getWriter().print(json.toJSONString());
}
if("add".equals(flag)) { //增加操作。
FenleiBean cb = cs.add(name);
json.put("aFenlei",cb);
response.getWriter().print(json.toJSONString());
}
if("delete".equals(flag)) { //刪除操作
boolean result = cs.delete(id);
System.out.println(flag);
System.out.println(result);
if(result){
json.put("result",result);
json.put("msg","刪除成功");
response.getWriter().print(json.toJSONString());
System.out.println(json.toJSONString());
} else {
json.put("result",result);
json.put("msg","刪除失敗");
response.getWriter().print(json.toJSONString());
}
}
if("update".equals(flag)) { //更新信息
System.out.println(flag);
String newname = request.getParameter("newname");
System.out.println("---------------update newname"+newname);
boolean result = cs.update(newname);
if(result){
json.put("result",result);
json.put("msg","修改成功");
response.getWriter().print(json.toJSONString());
System.out.println(json.toJSONString());
} else {
json.put("result",result);
json.put("msg","修改失敗");
response.getWriter().print(json.toJSONString());
}
}
}
}
</pre><pre name="code" class="javascript">
以上這篇Ajax實(shí)現(xiàn)動(dòng)態(tài)顯示并操作表信息的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Ajax異步請(qǐng)求的五個(gè)步驟及實(shí)戰(zhàn)案例
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,Ajax可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新,下面這篇文章主要給大家介紹了關(guān)于Ajax異步請(qǐng)求的五個(gè)步驟及實(shí)戰(zhàn)案例的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
jQuery中ajax - post() 方法實(shí)例詳解
在jquery中的ajax有二個(gè)數(shù)據(jù)發(fā)送模式，一種是get，另一種是post()，下面我來(lái)給大家介紹介紹，有需要了解的朋友可參考2015-09-09
這篇文章主要介紹了JavaScript性能優(yōu)化之函數(shù)節(jié)流（throttle）與函數(shù)去抖（debounce），感興趣的小伙伴們可以參考一下2016-08-08
xajax的FORM例子...2006-11-11
PJBLOG中用到的ajaxjs.幾個(gè)簡(jiǎn)單的函數(shù)
PJBLOG中用到的ajaxjs.幾個(gè)簡(jiǎn)單的函數(shù)...2007-12-12
如何利用Ajax實(shí)現(xiàn)地區(qū)三級(jí)聯(lián)動(dòng)詳解
這篇文章主要給大家介紹了關(guān)于如何利用Ajax實(shí)現(xiàn)地區(qū)三級(jí)聯(lián)動(dòng)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
使用ajax技術(shù)無(wú)刷新動(dòng)態(tài)調(diào)用新浪股票實(shí)時(shí)數(shù)據(jù)
由于最近網(wǎng)速慢的緣故，查看股票信息時(shí)網(wǎng)頁(yè)老是打不開(kāi)。這幾天一直在研究ajax，于是用jquery自己做了一個(gè)自動(dòng)讀取新浪股票實(shí)時(shí)數(shù)據(jù)的頁(yè)面2014-08-08
自己動(dòng)手打造ajax圖片上傳(網(wǎng)上沒(méi)有的)
需要一款圖片上傳插件，但是網(wǎng)上沒(méi)有提供一款符合自己需求且好用的。于是就自己動(dòng)手寫了一個(gè)，需要的朋友可以參考下2014-06-06
利用AJAX實(shí)現(xiàn)無(wú)刷新數(shù)據(jù)分頁(yè)
這篇文章主要介紹了利用AJAX實(shí)現(xiàn)數(shù)據(jù)分頁(yè)的相關(guān)資料，如何利用AJAX無(wú)刷新直接從服務(wù)器獲取數(shù)據(jù)分頁(yè)，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了Ajax驗(yàn)證用戶名是否存在的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04