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插件
Mar 29 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
构建Python包的五个简单准则简介
2015/06/15 Python
简单解决Python文件中文编码问题
2015/11/22 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
Pytorch之保存读取模型实例
2019/12/30 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
python实现梯度下降法
2020/03/24 Python
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
DTD的含义以及作用
2014/01/26 面试题
运动会入场词100字
2014/02/06 职场文书
经销商年会策划方案
2014/05/29 职场文书
2015年公司新年寄语
2014/12/08 职场文书
先进个人推荐材料
2014/12/29 职场文书
营销计划书范文
2015/01/17 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
听证会主持词
2015/07/03 职场文书
九年级语文教学反思
2016/03/03 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP