首页
所有分类
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 HTML中的table
Apr 15 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
javascript表格的渲染组件
Jul 03 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
jquery滚动条插件（可以自定义）
Dec 11 Javascript
微信小程序 欢迎页面的制作（源码下载）
Jan 09 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
前端vue如何使用高德地图
Nov 05 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
React(6) i5 10400(1) R72E(1) win11(40) i5 9400(1) win10(43) 对讲机(1) i7 6700(1) ipad(1) GTX1660(1)
You might like
PHP文本数据库的搜索方法
2006/10/09 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
Yii框架小部件（Widgets）用法实例详解
2020/05/15 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
用实例解释Python中的继承和多态的概念
2015/04/27 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
使用C#编写创建一个线程的代码
2013/01/22 面试题
生物技术研究生自荐信
2013/11/12 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
医院办公室主任职责
2013/12/29 职场文书
学生请假条
2014/04/11 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书