web前端之Ajax遍历json后对每一条数据进行相应的修改和删除
Posted 爸爸去哪了2之熊猫三胞胎
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端之Ajax遍历json后对每一条数据进行相应的修改和删除相关的知识，希望对你有一定的参考价值。
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'
);
)
);
以上是关于web前端之Ajax遍历json后对每一条数据进行相应的修改和删除的主要内容，如果未能解决你的问题，请参考以下文章