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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jquery更改元素属性attr()方法操作示例
May 22 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
域名查询代码公布
2006/10/09 PHP
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
js日期、星座的级联显示代码
2014/01/23 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
Python中分数的相关使用教程
2015/03/30 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
python plotly绘制直方图实例详解
2019/07/22 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
基于Pytorch SSD模型分析
2020/02/18 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
python压包的概念及实例详解
2021/02/17 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
参观接待方案
2014/03/17 职场文书
大学毕业寄语大全
2014/04/10 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
2014年工商所工作总结
2014/12/09 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书