標籤：str script 一件事 lang 地址 blog 需要 click username
具體代碼如下:
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，沒有很複雜。
js學習總結----crm客戶管理系統之前端頁面開發及資料渲染
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
