jQuery操作JSON的CRUD用法实例
本文实例讲述了jQuery操作JSON的CRUD用法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>Jqueryui</title>
<linkhref="css/jquery-ui-1.8.16.custom.css"rel="stylesheet"type="text/css"/>
<scriptsrc="js/jquery-1.6.2.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery-ui-1.8.16.custom.js"type="text/javascript"></script>
</head>
//AuthorByEricLiang
<body>
<form>
<tableborder="1"id="personform">
<tr>
<td>id</id>
<td>name</td>
<td>sex</td>
<td>age</td>
<td>DeleteAction</td>
<td>UpdateAction</td>
</tr>
</table>
</form>
id: <inputtype="text"id="userid"/>
name:<inputtype="text"id="username"/>
sex: <inputtype="text" id="sex"/>
age: <inputtype="text" id="age"/>
<inputtype="button"value="add"onclick="addperson()"/>
</br>
id: <inputtype="text"id="update_userid"disabled="disabled"/>
name:<inputtype="text"id="update_username"/>
sex: <inputtype="text" id="update_sex"/>
age: <inputtype="text" id="update_age"/>
<inputtype="button"value="update"onclick="update()"/>
</body>
</html>
<script>
</script>
<scripttype="text/javascript">
varjsonObj={teacher:[
{id:'1',name:"Eric",sex:"m",age:"40"},
{id:'2',name:"Ghost",sex:"m",age:"28"},
{id:'3',name:"Didi",sex:"m",age:"27"}
]};
refresh();
functionrefresh(){
varpersons=jsonObj.teacher;
$("tr[name='person']").remove();
for(vari=0;i<persons.length;i++){
varcur_person=persons[i];
varcur_name=cur_person.name;
varcur_sex=cur_person.sex;
varcur_age=cur_person.age;
varcur_id=cur_person.id;
varidTd="<td>"+cur_id+"</td>";
varnameTd="<td>"+cur_name+"</td>";
varsexTd="<td>"+cur_sex+"</td>";
varageTd="<td>"+cur_age+"</td>";
vardeleteAction="<td><ahref='#'onclick='deleteperson(this)'name='";
deleteAction+=cur_id+"'"+"</a>删除</td>"
varupdateAction="<td><ahref='#'onclick='updateperson(this)'name='";
updateAction+=cur_id+"'"+"</a>更新</td>"
//alert(deleteAction);
vartrStr="<trname='person'>"+idTd;
trStr+=nameTd;
trStr+=sexTd;
trStr+=ageTd;
trStr+=deleteAction;
trStr+=updateAction;
//alert(trStr);
$('#personform').append(trStr);
}
}
functioncheckPersonExist(targetId){
varpersons=jsonObj.teacher;
for(vari=0;i<persons.length;i++){
varcur_person=persons[i];
if(cur_person.id==targetId){
alert("添加失败!Id"+targetId+"已经存在!");
returnfalse;
}
}
returntrue;
}
functionaddperson(){
varuserid=$('#userid').val();
varflag=checkPersonExist(userid);
if(flag==false){
returnfalse;
}
varusername=$('#username').val();
varsex=$('#sex').val();
varage=$('#age').val();
varnewPerson="{id:"+"'"+userid+"'"+","+"name:"+"'"+username+"'"+","+"sex:"+"'"+sex+"'"+","+"age:"+"'"+age+"'"+"}";
newPerson=eval("("+newPerson+")");
//$('#personform').append(trStr);
jsonObj.teacher.push(newPerson);
refresh();
}
functiondeleteperson(obj){
//alert(obj.name);
vardelId=obj.name;
varpersons=jsonObj.teacher;
for(vari=0;i<persons.length;i++){
varcur_person=persons[i];
if(cur_person.id==delId){
persons.splice(i,1);
}
}
refresh();
}
functionupdateperson(targetId){
varupdateId=targetId.name;
varpersons=jsonObj.teacher;
for(vari=0;i<persons.length;i++){
varcur_person=persons[i];
if(cur_person.id==updateId){
varcur_id=cur_person.id
varcur_name=cur_person.name;
varcur_sex=cur_person.sex;
varcur_age=cur_person.age;
$('#update_userid').attr('value',cur_id);
$('#update_username').attr('value',cur_name);
$('#update_sex').attr('value',cur_sex);
$('#update_age').attr('value',cur_age);
}
}
}
functionupdate(){
varcur_id=$('#update_userid').val();
varcur_name=$('#update_username').val();
varcur_sex=$('#update_sex').val();
varcur_age=$('#update_age').val();
varpersons=jsonObj.teacher;
for(vari=0;i<persons.length;i++){
varuserId=persons[i].id;
if(cur_id==userId){
persons[i].name=cur_name;
persons[i].age=cur_age;
persons[i].sex=cur_sex;
}
}
refresh();
}
</script>
希望本文所述对大家的jQuery程序设计有所帮助。