jQuery操作JSON的CRUD用法实例

当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目

来源：阅读：1309 次日期：2015-02-27 11:23:53

温馨提示：小编为您整理了“jQuery操作JSON的CRUD用法实例”,方便广大网友查阅！

这篇文章主要介绍了jQuery操作JSON的CRUD用法,实例分析了jQuery进行CURD的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery操作JSON的CRUD用法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>Jquery ui</title>

</head>

// Author By Eric Liang

<body>

<form>

<tr>

<td>Delete Action</td>

<td>Update Action</td>

</tr>

</table>

</form>

id: <input type="text" id="userid" />

name: <input type="text" id="username"/>

sex: <input type="text" id="sex"/>

age: <input type="text" id="age"/>

</br>

id: <input type="text" id="update_userid" disabled="disabled" />

name: <input type="text" id="update_username"/>

sex: <input type="text" id="update_sex"/>

age: <input type="text" id="update_age" />

</body>

</html>

</script>

var jsonObj = { 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();

function refresh() {

var persons = jsonObj.teacher;

$("tr[name='person']").remove();

for(var i=0; i<persons.length; i++) {

var cur_person = persons[i];

var cur_name = cur_person.name;

var cur_sex = cur_person.sex;

var cur_age = cur_person.age;

var cur_id = cur_person.id;

var idTd = "<td>"+ cur_id +"</td>";

var nameTd = "<td>"+ cur_name +"</td>";

var sexTd = "<td>"+ cur_sex +"</td>";

var ageTd = "<td>"+ cur_age +"</td>";

var deleteAction = "<td><a href='#' onclick='deleteperson(this)' name='";

deleteAction += cur_id +"'" +"</a>删除</td>"

var updateAction = "<td><a href='#' onclick='updateperson(this)' name='";

updateAction += cur_id +"'" +"</a>更新</td>"

//alert(deleteAction);

var trStr = "<tr name='person'>" + idTd;

trStr += nameTd;

trStr += sexTd;

trStr += ageTd;

trStr += deleteAction;

trStr += updateAction;

//alert(trStr);

$('#personform').append(trStr);

}

function checkPersonExist(targetId) {

var persons = jsonObj.teacher;

for(var i=0; i<persons.length; i++) {

var cur_person = persons[i];

if(cur_person.id == targetId) {

alert("添加失败! Id"+ targetId + "已经存在!");

return false;

}

return true;

}

function addperson() {

var userid = $('#userid').val();

var flag = checkPersonExist(userid);

if(flag == false) {

return false;

}

var username = $('#username').val();

var sex = $('#sex').val();

var age = $('#age').val();

var newPerson = "{id:" + "'"+userid+"'" +","+ "name:"+ "'"+username+"'"+","+ "sex:"+"'"+sex + "'"+"," + "age:"+"'"+age+"'" +"}";

newPerson = eval("(" + newPerson + ")");

//$('#personform').append(trStr);

jsonObj.teacher.push(newPerson);

refresh();

}

function deleteperson(obj) {

//alert(obj.name);

var delId = obj.name;

var persons = jsonObj.teacher;

for(var i=0; i<persons.length; i++) {

var cur_person = persons[i];

if(cur_person.id == delId) {

persons.splice(i,1);

}

refresh();

}

function updateperson(targetId) {

var updateId = targetId.name;

var persons = jsonObj.teacher;

for(var i=0; i<persons.length; i++) {

var cur_person = persons[i];

if(cur_person.id == updateId) {

var cur_id = cur_person.id

var cur_name = cur_person.name;

var cur_sex = cur_person.sex;

var cur_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);

}

function update() {

var cur_id = $('#update_userid').val();

var cur_name = $('#update_username').val();

var cur_sex = $('#update_sex').val();

var cur_age = $('#update_age').val();

var persons = jsonObj.teacher;

for(var i=0; i<persons.length; i++) {

var userId = 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程序设计有所帮助。

更多信息请查看IT技术专栏

上一篇：浅谈javascript中this在事件中的应用

下一篇：浅谈JavaScript中的String对象常用方法

手机网站地址：jQuery操作JSON的CRUD用法实例

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！