jQuery 实时保存页面动态添加的数据的示例


Posted in jQuery onAugust 14, 2017

本文介绍了jQuery 实时保存页面动态添加的数据的示例,分享给大家,具体如下:

需求:用户填写的东西,必须要实时保存

分析:监听用户操作事件,如:change、keyup 等,向后端发送请求

实际情况:

  • 用户填写的表单,是通过 JavaScript 动态新增的,这就需要使用为动态新增元素绑定事件。
  • 发送请求给后端,取决于前面的必填项是否已经完整填写。
  • 必须区分用户是动态新增了填写栏目呢?还是在修改?
  • 当前事件对象是什么?怎么通过该对象获取用户输入的数据?
  • 用户多次修改同一栏目,必须传送带有 ID 的数据给后端。目的,用于识别是新增,还是更新操作。

动态新增代码:

// template() 是一个模板格式化函数
$('#modal_pl_content').html(template('modal_temp', {data:''}));

模板代码:

<script id="modal_temp" type="text/html">
<form class="cksd_comment_id">   
  <div class="col-sm-12 addID">
    <input type="hidden" name="comment_update_id" value="" />   
    <div class="col-sm-12 hr hr-18 dotted hr-dotted"></div>
    <div class="col-sm-3 form-group">        
      <label class="col-sm-3 control-label no-padding-right">评价ID</label>      
      <div class="col-sm-9"><input type="text" class="col-xs-12" name="commentID"></div>     
    </div>     
    <div class="col-sm-1 form-group">      
      <select name="star" onchange="checkIsInput(this)">        
        <option value="5">5</option>        
        <option value="4">4</option>        
        <option value="3">3</option>        
        <option value="2">2</option>        
        <option value="1">1</option>      
      </select>     
    </div>     
    <div class="col-sm-4 form-group">        
      <label class="col-sm-3 control-label no-padding-right">当前数量</label>      
      <div class="col-sm-8">        
        <div class="col-sm-5"><input type="text" class="col-xs-12" name="now_yes" onkeyup="is_intdata(this,this.value)" value="0"></div>          
        <label class="col-sm-1 control-label no-padding-left no-padding-right">of</label>        
        <div class="col-sm-5"><input type="text" class="col-xs-12" name="now_total" onkeyup="is_intdata(this,this.value)" value="0"></div>      
      </div>    
    </div>      
    <div class="col-sm-3 form-group">        
      <div class="col-sm-12">          
        <label class="col-sm-1 control-label no-padding-left no-padding-right">Yes</label>          
        <div class="col-sm-5"><input type="text" class="col-xs-12" name="add_yes" onkeyup="is_intdata(this,this.value)" value="0"></div>          
        <label class="col-sm-1 control-label no-padding-left no-padding-right">No</label>          
        <div class="col-sm-5"><input type="text" class="col-xs-12" name="add_no" readonly onkeyup="is_intdata(this,this.value)" value="0"></div>
      </div>      
    </div>    
    <div class="col-sm-1 form-group">总数: <br><span class="total_yes">0</span> of <span class="totals">0</span></div>     
    <div class="col-sm-1 form-group delbox"><button type="button" class="btn btn-danger btn-xs" onclick="delPlID(this)">删除</button></div>   
  </div>  
</form>
</script>

事件监听与发送请求代码:

$(document).on("change keyup", ".cksd_comment_id", function(event) {  
/*  var current = event.target.tagName.toLowerCase(); 
 if ((current != 'input') || (current != 'select')) {   
  event.preventDefault();  
 } 
*/  
 var praise_row = {}; 
 praise_row.cpid_a = $("[name='cpid_a']").val();  
 praise_row.pt_a = $("[name='pt_a']").find("option:selected").val(); 
 praise_row.dp_a = $("[name='dp_a']").find("option:selected").val();  
 praise_row.cptime_start = $("[name='cptime_start']").val();  
 praise_row.cptime_end = $("[name='cptime_end']").val();  
 praise_row.cpkeyword_a = $("[name='cpkeyword_a']").val();  
 praise_row.status = $("[name='cksd_status']").val();  
 if (praise_row.cpid_a && praise_row.pt_a && praise_row.dp_a && praise_row.cptime_start && praise_row.cptime_end) {   
  var comment_row = {};   
  $(this).find('input, select').each(function () {     
    var field = $(this).attr('name');     
    comment_row[field] = $(this).val();   
  });   
  var pp_id = $("input.cksd_praise_pid").val();   //console.log($(this));   
  var current_form = $(this);   
  var comment_id = $(this).children().find("[name='comment_update_id']").val();   
  var data = {};   
  if (pp_id) {     
    praise_row.id = pp_id;     
    comment_row.id = comment_id;     
    data = {praise: praise_row, comment: comment_row}   
  } else {     
    data = {praise: praise_row, comment: comment_row};   
  }   
  //console.log(data);   
  $.ajax({     
   type: 'post',     
   url: "<?php echo site_url('/praise/save_intime');?>",     
   data: data,     
   dataType: 'json'   
   }).done(function(res) {     
    if ((res.s == 0)) {      
     console.log($(this));      
     $('input.cksd_praise_pid').val(res.msg.p_id);      
     current_form.children().find("[name='comment_update_id']").val(res.msg.c_id);     
    }     
    console.log(res);   
  });  
}});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
js和jquery中获取非行间样式
May 05 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 #jQuery
jquery对table做排序操作的实例演示
Aug 10 #jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 #jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 #jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 #jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 #jQuery
You might like
php变量范围介绍
2012/10/15 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP目录操作实例总结
2016/09/27 PHP
PHP xpath()函数讲解
2019/02/11 PHP
加速IE的Javascript document输出的方法
2010/12/02 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
js实现时间日期校验
2020/05/26 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python处理html转义字符的方法详解
2016/07/01 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
单链表反转python实现代码示例
2018/02/08 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
集团薪酬管理制度
2014/01/13 职场文书
销售人员自我评价
2014/02/01 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
美术学专业求职信
2014/07/23 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏