js學習總結----crm客戶管理系統之前端頁面開發及數據渲染
阿新 • • 發佈：2017-08-03
bmi length element || useradd attribute xxx tle exe
具體代碼如下:
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
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客戶管理系統之前端頁面開發及數據渲染