jQuery 实时保存页面动态添加的数据的示例
网络编程 2021-07-04 18:33www.168986.cn编程入门
本篇文章主要介绍了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_ment_id"> <div class="col-sm-12 addID"> <input type="hidden" name="ment_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="mentID"></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_ment_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 ment_row = {}; $(this).find('input, select').each(function () { var field = $(this).attr('name'); ment_row[field] = $(this).val(); }); var pp_id = $("input.cksd_praise_pid").val(); //console.log($(this)); var current_form = $(this); var ment_id = $(this).children().find("[name='ment_update_id']").val(); var data = {}; if (pp_id) { praise_row.id = pp_id; ment_row.id = ment_id; data = {praise: praise_row, ment: ment_row} } else { data = {praise: praise_row, ment: ment_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='ment_update_id']").val(res.msg.c_id); } console.log(res); }); }});
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:利用纯JS实现像素逐渐显示的方法示例
下一篇:js异步编程小技巧详解
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程