首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery操作JSON的CRUD用法实例

Posted in Javascript onFebruary 25, 2015

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  

<title>Jquery ui</title>  

<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />  

<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>  

<script src="js/jquery-ui-1.8.16.custom.js" type="text/javascript"></script>  

</head>  

// Author By Eric Liang   

<body>  

    <form>  

            <table border="1" id="personform">  

                    <tr>  

                        <td>id</id>  

                        <td>name</td>  

                        <td>sex</td>      

                        <td>age</td>  

                        <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"/>  

    <input type="button" value="add" onclick="addperson()"/>  

</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" />  

    <input type="button" value="update" onclick="update()"/>  

</body>  

</html>  

<script>  

</script>  

<script type="text/javascript">  

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

jQuery操作JSON的CRUD用法实例

- Author -

erix1991

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 仿关机效果的图片层
Dec 26 Javascript
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
jquery插件validate验证的小例子
May 08 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
Javascript基础教程之argument 详解
Jan 18 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
vue+axios 前端实现登录拦截的两种方式（路由拦截、http拦截）
Oct 24 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 #Javascript
javascript获得当前的信息的一些常用命令
Feb 25 #Javascript
javascript实现图像循环明暗变化的方法
Feb 25 #Javascript
JS往数组中添加项性能分析
Feb 25 #Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 #Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 #Javascript
提交按钮的name＝'submit'引起的js失效问题及原因
Feb 25 #Javascript
读取(1) 分块(1) decorator(1) 装饰器(1) translation(2) 数据保存(1) 查找算法(1) 二维数组(2) 网页解析(1) bs4(1)
You might like
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python机器人运动范围问题的解答
2019/04/29 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Tensorflow 实现释放内存
2020/02/03 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
详解Python中import机制
2020/09/11 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
Pottery Barn阿联酋：购买家具、家居装饰及更多
2019/12/08 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
学生违反校规检讨书
2014/10/28 职场文书
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL