web前端之Ajax遍歷json後對每一條資料進行相應的修改和刪除
阿新 • • 發佈:2019-02-13
web前端之ajax遍歷json後對每一條資料進行相應的修改和刪除
function serviceUser(){
$('.ergodicPersonList').remove();
$.ajax({
url: "/business/findpersons.json",
dataType: "json",
type:"GET",
success: function(doc) {
var objs=eval(doc);
for (var i = 0; i < objs.length; i++){
var personid=objs[i].personId;
var name=objs[i].personName;
var email=objs[i].personEmail;
var sector=objs[i].personSector;
var position=objs[i].personPosition;
var password=objs[i].personPassword;
$("#personList thead" ).append(
"<tr class='ergodicPersonList'>"+
"<th>"+name+"</th>"+
"<th>"+password+"</th>"+
"<th>"+email+"</th>"+
"<th>"+position+"</th>"+
"<th><input type='button' value='刪除' name=" +i+" class='deletePersonBut'></th>"+
"<th><input type='button' value='修改' name="+i+" class='updataPersonBut'></th>"+
"</tr>"
);
var getA = "#personList .deletePersonBut[name="+ i + "]";//就這裡獲取的原因,那個i=objs.length的原因,感覺應該就是閉包的問題。
$(getA).click(function(){
var thid=$(this).parent();
var pid=thid.children(".deletePersonBut").attr('name');
deletePersonButMethod(objs[pid].personId);
});
var getA = "#personList .updataPersonBut[name="+ i + "]";//就這裡獲取的原因,那個i=objs.length的原因,感覺應該就是閉包的問題。
$(getA).click(function(){
var thid=$(this).parent();
var pid=thid.children(".updataPersonBut").attr('name');
updataPersonButMethod(objs[pid].personId,objs[pid].personName,objs[pid].personEmail,objs[pid].personSector,objs[pid].personPosition,objs[pid].personType,objs[pid].personPassword);
});
}
}
});
$('#closePersonListBut').click(function(){
$('#personList').hide();
$('body').css('background','#fff');
});
function deletePersonButMethod(id){
$.ajax({
url: "/business/personDelete.json",
dataType: "json",
data:{
person_id:id,
},
type:"GET",
complete: function(doc) {
serviceUser();
}
});
};
function updataPersonButMethod(personId,personName,personEmail,personSector,personPosition,personType,personPassword){
$('#tab_con_2').remove();
$('body').append(
"<div id='tab_con_2' style='display:none;body:#ccc;' >"+
"<form action='' method='post' name='profile' id='addPerson'>"+
"<span style='color:red;margin-top:10px;margin-left:50px;position:fixed;'>*</span><span style='font-weight:bold;margin-left:57px; '>姓名: </span><input type='text' name='person_name' id='loginPersonName' style='margin-top:5px;'><br />"+
"<span style='color:red;margin-top:10px;margin-left:50px;position:fixed;'>*</span><span style='font-weight:bold;margin-left:57px; '>密碼: </span><input type='password' name='person_password' id='loginPersonPassword' style='margin-top:5px;'><br />"+
"<span style='color:red;margin-top:10px;margin-left:50px;position:fixed;'>*</span><span style='font-weight:bold;margin-left:57px; '>郵箱: </span><input type='text' name='person_email' id='loginPersonEmail' style='margin-top:5px;'><br />"+
"<span style='color:red;margin-top:10px;margin-left:50px;position:fixed;'>*</span><span style='font-weight:bold;margin-left:57px; '>職位: </span>"+
"<select id='loginPersonPosition' size='1' name='person_position'>"+
"<option>測試人員</option>"+
"<option>專案經理</option>"+
"</select><br /> "+
"<p style='display:none;'>許可權:<input type='text' name='person_type' id='loginPersonType'></p>"+
"<input type='button' value='修改' id='updataPersonMessage' >"+
"</form>"+
"<div class='login_del'><img src='images/del.jpg' id='login_img9'></div>"+
"</div>"
);
$('#tab_con_2').show(1000);
$('body').css('background','#ccc');
$('#loginPersonName').val(personName);
$('#loginPersonPassword').val(personPassword);
$('#loginPersonEmail').val(personEmail);
$('#loginPersonPosition').val(personPosition);
$('#login_img9').click(function(){
$('#tab_con_2').hide();
$('body').css('background','#fff');
});
$('#updataPersonMessage').click(function(){
if($('#loginPersonPosition').val()=='專案經理'){
personType=4;
}else if($('#loginPersonPosition').val()=='測試人員'){
personType=1;
}
$.ajax({
url: "/business/personUpdate.json",
dataType: "json",
data:{
person_id:personId,
person_name:$('#loginPersonName').val(),
person_email:$('#loginPersonEmail').val(),
person_position:$('#loginPersonPosition').val(),
person_type:personType,
person_password:$('#loginPersonPassword').val(),
},
type:"POST",
complete: function(doc) {
serviceUser();
}
});
});
};
$('#addPersonBut').click(function(){
$('#tab_con_2').remove();
$('body').append(
"<div id='tab_con_2' style='display:none;body:#ccc;' >"+
"<form action='' method='post' name='profile' id='addPerson'>"+
"<span style='color:red;margin-top:10px;margin-left:50px;position:fixed;'>*</span><span style='font-weight:bold;margin-left:57px; '>姓名: </span><input type='text' name='person_name' id='loginPersonName' style='margin-top:5px;'><br />"+
"<span style='color:red;margin-top:10px;margin-left:50px;position:fixed;'>*</span><span style='font-weight:bold;margin-left:57px; '>密碼: </span><input type='password' name='person_password' id='loginPersonPassword' style='margin-top:5px;'><br />"+
"<span style='color:red;margin-top:10px;margin-left:20px;position:fixed;'>*</span><span style='font-weight:bold;margin-left:27px; '>確認密碼: </span><input type='password' id='loginPersonDoublePassword' style='margin-top:5px;'><br />"+
"<span style='color:red;margin-top:10px;margin-left:50px;position:fixed;'>*</span><span style='font-weight:bold;margin-left:57px; '>郵箱: </span><input type='text' name='person_email' id='loginPersonEmail' style='margin-top:5px;'><br />"+
"<span style='color:red;margin-top:10px;margin-left:50px;position:fixed;'>*</span><span style='font-weight:bold;margin-left:57px; '>職位: </span>"+
"<select id='loginPersonPosition' size='1' name='person_position'>"+
"<option>測試人員</option>"+
"<option>專案經理</option>"+
"</select><br /> "+
"<p style='display:none;'>許可權:<input type='text' name='person_type' id='loginPersonType'></p>"+
"<input type='button' value='新增' id='addPersonMessage' >"+
"</form>"+
"<div class='login_del'><img src='images/del.jpg' id='login_img10'></div>"+
"</div>"
);
$('#tab_con_2').show(1000);
$('body').css('background','#ccc');
$('#login_img10').click(function(){
$('#tab_con_2').hide();
$('body').css('background','#fff');
});
//註冊
$('#addPersonMessage').click(function(){
if($('#loginPersonName').val()==''){
layer.alert('賬戶名不能為空', {
icon: 1,
skin: 'layer-ext-moon'
});
return false;
}else if($('#loginPersonEmail').val()==''){
layer.alert('賬戶email不能為空', {
icon: 1,
skin: 'layer-ext-moon'
});
return false;
}else if($('#loginPersonPosition').val()==''){
layer.alert('職位不能為空', {
icon: 1,
skin: 'layer-ext-moon'
});
return false;
}else if($('#loginPersonPassword').val()==''){
layer.alert('密碼不能為空', {
icon: 1,
skin: 'layer-ext-moon'
});
return false;
}else if($('#loginPersonDoublePassword').val()==''){
layer.alert('確認密碼不能為空', {
icon: 1,
skin: 'layer-ext-moon'
});
return false;
}else if($('#loginPersonPassword').val() != $('#loginPersonDoublePassword').val()){
layer.alert('確認密碼輸入有誤', {
icon: 1,
skin: 'layer-ext-moon'
});
return false;
}else{
if($('#loginPersonPosition').val()=="測試人員"){
$('#loginPersonType').val('1');
$.ajax({
url: "/business/personAdd.json",
dataType: "json",
data:{
person_name:$('#loginPersonName').val(),
person_email:$('#loginPersonEmail').val(),
person_position:$('#loginPersonPosition').val(),
person_type:$('#loginPersonType').val(),
person_password:$('#loginPersonPassword').val(),
},
type:"POST",
complete: function(doc) {
$('#tab_con_2').hide();
$('body').css('background','#fff');
serviceUser();
}
});
}else if($('#loginPersonPosition').val()=="專案經理"){
$('#loginPersonType').val('4');
$.ajax({
url: "/business/personAdd.json",
dataType: "json",
data:{
person_name:$('#loginPersonName').val(),
person_email:$('#loginPersonEmail').val(),
person_position:$('#loginPersonPosition').val(),
person_type:$('#loginPersonType').val(),
person_password:$('#loginPersonPassword').val(),
},
type:"POST",
complete: function(doc) {
$('#tab_con_2').hide();
$('body').css('background','#fff');
serviceUser();
}
});
}else{
layer.alert('輸入有誤', {
icon: 1,
skin: 'layer-ext-moon'
});
}
}
})
});
}