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

本文介绍了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);
  });
}});

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

时间: 2017-08-13

jquery Ajax实现Select动态添加数据

jquery Ajax实现Select动态添加数据,具体内容如下 1.背景  最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示.但是,这次要实现select与别的选项框联动,也就是要动态添加option数据.查阅了很多资料,终于搞定.下面就分享一下,如何利用jQuery和Ajax实现select动态添加数据. 2.本文代码实现的是车辆型号根据车辆品牌联动显示的功能.首先,是jsp中的车辆品牌定义,这个很简单.如下:

JQuery Ajax 异步操作之动态添加节点功能

异步操作动态添加节点,导致在代码中给添加的节点全局绑定事件或者获取元素无效,上代码: $(function () { var IP = '...'; // 页面中的默认编号起始值 和 公用IP前缀 showData(); function showData() { if ($('.content')) $('.content').remove(); $.ajax({ url:IP + '/get', type:'get', success:function (data) { var newInf

jQuery实现的简单动态添加、删除表格功能示例

本文实例讲述了jQuery实现的简单动态添加.删除表格功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 我们</title> <style> * { padding: 0; margin: 0;

JS中利用localStorage防止页面动态添加数据刷新后数据丢失

非常不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,use

浅析jQuery Ajax请求参数和返回数据的处理

刚接触学会用jQuery ajax的时候,觉得真东西好神奇,这样就可以把数据取回来了啊.然后我可以把取回来的数据渲染到页面上,一颗赛艇. 之前很早接触到项目,并不知道怎么优雅的去用jquery ajax(现在也不优雅): 那个时候看别人写的代码 有 $.post("","",...) 也有 $.get("","",...) 还有 $.ajax() 当然现在知道点,这些写法都是一个意思,还是习惯用 $.ajax() 写写吧. 之

jQuery使用toggleClass方法动态添加删除Class样式的方法

本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass,运行下面的代码点击按钮可以看到文本段落字体在蓝色和黑色间切换 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"&

使用js对select动态添加和删除OPTION示例代码

<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc

jQuery实现html表格动态添加新行的方法

本文实例讲述了jQuery实现html表格动态添加新行的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

jquery ajax 局部无刷新更新数据的实现案例

要更新的页面 复制代码 代码如下: <!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>    <title>&l