本文介绍了jQuery 实时保存页面动态添加的数据的示例，分享给大家，具体如下：
需求：
用户填写的东西，必须要实时保存分析：
监听用户操作事件，如：change、keyup 等，向后端发送请求实际情况：
- 用户填写的表单，是通过 JavaScript 动态新增的，这就需要使用为动态新增元素绑定事件。
- 发送请求给后端，取决于前面的必填项是否已经完整填写。
- 必须区分用户是动态新增了填写栏目呢？还是在修改？
- 当前事件对象是什么？怎么通过该对象获取用户输入的数据？
- 用户多次修改同一栏目，必须传送带有 ID 的数据给后端。目的，用于识别是新增，还是更新操作。
动态新增代码：
模板代码：
事件监听与发送请求代码：
rush:js;">
$(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: "",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);
});
}});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/jquery/37194.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
