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 相关文章推荐
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 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分页函数完整实例代码
2014/09/22 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
requireJS使用指南
2016/04/27 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
Python常用模块介绍
2014/11/21 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
Python代码太长换行的实现
2019/07/05 Python
Python实现括号匹配方法详解
2020/02/10 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
详解Python yaml模块
2020/09/23 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
英国女性时尚品牌:Apricot
2018/12/04 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
网络维护管理员的自我评价分享
2013/11/11 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
担保书格式及范文
2014/04/01 职场文书
美国留学经济担保书
2014/05/20 职场文书
公司介绍信范文
2015/01/31 职场文书
天下第一关导游词
2015/02/06 职场文书
2016年师德学习心得体会
2016/01/12 职场文书