首页
所有分类
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 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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
Hudi(1) GUI(2) Pool(1) feDisplacementMap(1) sortInts(1) WebSockets(3) apply(1) 数据处理(2) agg(1) Tkinter(4)
You might like
PHP伪静态页面函数附使用方法
2008/06/20 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
Smarty变量用法详解
2016/05/11 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
化学教师自荐信范文
2013/12/28 职场文书
给市场的环保建议书
2014/05/14 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
2014最新预备党员思想汇报范文：中国梦，我的梦
2014/10/25 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
《时代广场的蟋蟀》读后感：真挚友情，温暖世界！
2020/01/08 职场文书
用python画城市轮播地图
2021/05/28 Python