具体代码如下:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/index.css" charset=‘utf-8‘> </head> <body> <div class=‘box‘> <a href="add.html" class=‘link‘>增加客户</a> <h2 class=‘head‘> <span class=‘w50‘>编号</span> <span class=‘w150‘>姓名</span> <span class=‘w50‘>年龄</span> <span class=‘w200‘>电话</span> <span class=‘w200‘>地址</span> <span class=‘w150‘>操作</span> </h2> <ul class=‘list‘ id=‘list‘> <!-- <li> <span class=‘w50‘>1</span> <span class=‘w150‘>xxx</span> <span class=‘w50‘>25</span> <span class=‘w200‘>xxxxxxxxx</span> <span class=‘w200‘>xxxxxxxxxxx</span> <span class=‘w150 control‘> <a href="">修改</a> <a href="">删除</a> </span> </li> --> </ul> </div> <script charset=‘utf-8‘ type=‘text/javascript‘ src=‘js/ajax.js‘></script> <script charset=‘utf-8‘ type=‘text/javascript‘> var oList = document.getElementById(‘list‘); //首先获取所有的客户信息,完成页面的数据绑定 var customModule = (function(){ //DELETE CUSTOM function removeCustom(){ oList.onclick = function(e){ e = e || window.event; var tar = e.target || e.srcElement, tarTag = tar.tagName.toUpperCase(); if(tarTag==="A" && tar.innerHTML ==="删除"){ var customId = tar.getAttribute("customId"); var flag = window.confirm("确定要删除编号为["+customId+"]的客户吗?"); if(flag){ ajax({ url:"/removeInfo?id="+customId, success:function(jsonData){ if(jsonData && jsonData.code===0){ oList.removeChild(tar.parentNode.parentNode); return; } alert(jsonData.msg); } }) } } } } //BIND HTML function bindHTML(data){ var str = ""; for(var i = 0;i<data.length;i++){ var curData = data[i]; str+=‘<li>‘; str+=‘<span class="w50">‘+curData["id"]+‘</span>‘; str+=‘<span class="w150">‘+curData["name"]+‘</span>‘; str+=‘<span class="w50">‘+curData["age"]+‘</span>‘; str+=‘<span class="w200">‘+curData["phone"]+‘</span>‘; str+=‘<span class="w200">‘+curData["address"]+‘</span>‘; str+=‘<span class="w150 control">‘; str+=‘<a href="add.html?id=‘+curData["id"]+‘">修改</a>‘; str+=‘<a href="javascript:;" customId = "‘+curData["id"]+‘">删除</a>‘; str+="</span>" str+=‘</li>‘; } oList.innerHTML = str; } //SEND AJAX GET DATA function init(){ ajax({ url:"/getList", success:function(jsonData){ if(jsonData && jsonData.code==0){ var data = jsonData.data; bindHTML(data); removeCustom(); } } }) } return{ init:init } })() customModule.init(); </script> </body> </html>
add.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/index.css" charset=‘utf-8‘> </head> <body> <div class=‘box2‘> <div> <span>姓名:</span> <input type="text" id=‘userName‘> </div> <div> <span>年龄:</span> <input type="text" id=‘userAge‘> </div> <div> <span>电话:</span> <input type="text" id=‘userPhone‘> </div> <div> <span>地址:</span> <input type="text" id=‘userAddress‘> </div> <div class=‘submit‘ id=‘submit‘>提交</div> </div> <script charset=‘utf-8‘ type=‘text/javascript‘ src=‘js/ajax.js‘></script> <script charset=‘utf-8‘ type=‘text/javascript‘> String.prototype.queryURLParameter = function(){ //PARAMETER var obj = {}, reg = /([^?=&#]+)=([^?=&#]+)/g; this.replace(reg,function(){ var key = arguments[1], value = arguments[2]; obj[key] = value; }); //->HASH // reg = /#([^?=&#]+)/; // if (reg.test(this)) { // obj[‘hash‘] = reg.exec(this)[1]; // } // return obj; } var userName = document.getElementById("userName"); var userAge = document.getElementById("userAge"); var userPhone = document.getElementById("userPhone"); var userAddress = document.getElementById("userAddress"); var submit = document.getElementById("submit"); //判断一下是修改还是增加:如果URL的后面传递了ID值就是修改,否则就是增加,这样的话我们加载页面的第一件事情就是获取URL后面传递进来的ID值 var urlObj = window.location.href.queryURLParameter(), customId = urlObj["id"], isFlag = typeof customId === "undefined" ? false : true;//是否为修改操作 true代表修改 false代表增加 //如果是修改的话,我们首先需要把对应的客户的信息获取到,并且增加到对应的文本框中 if(isFlag){ ajax({ url:‘/getInfo?id=‘+customId, success:function(jsonData){ if(jsonData && jsonData.code===0){ var data = jsonData["data"]; userName.value = data["name"]; userAge.value = data["age"]; userPhone.value = data["phone"]; userAddress.value = data["address"] } } }) } //点击提交按钮的时候不一定是增加也可能是修改 submit.onclick = function(){ var obj = { name:userName.value, age:userAge.value, phone:userPhone.value, address:userAddress.value } //update if(isFlag){ obj.id = customId; ajax({ url:‘/updateInfo‘, type:"post", data:JSON.stringify(obj), success:function(jsonData){ if(jsonData && jsonData.code===0){ window.location.href="index.html"; return; } alert(jsonData.msg); } }) return; } //add ajax({ url:"/addInfo", type:"post", data:JSON.stringify(obj),//请求主体中的内容是JSON格式的字符串 success:function(jsonData){ if(jsonData && jsonData.code==0){ //成功后跳转回首页 window.location.href = "index.html"; return; } alert(jsonData.msg); } }) } </script> </body> </html>
custom.json(模拟后台数据)
[{"name":"a sd","age":"sa ","phone":"da s","address":"sd ","id":2}]
最终效果:
这个只是一个非常简单的demo,没有很复杂。
时间: 2024-10-25 20:41:13