好资源导航 » 文章资讯 » jQuery 实时保存页面动态添加的数据的示例

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

2023-09-26 14:22:15 64

本文介绍了jQuery实时保存页面动态添加的数据的示例，分享给大家，具体如下：

需求：用户填写的东西，必须要实时保存

分析：监听用户操作事件，如：change、keyup等，向后端发送请求

实际情况：

用户填写的表单，是通过JavaScript动态新增的，这就需要使用为动态新增元素绑定事件。
发送请求给后端，取决于前面的必填项是否已经完整填写。
必须区分用户是动态新增了填写栏目呢？还是在修改？
当前事件对象是什么？怎么通过该对象获取用户输入的数据？
用户多次修改同一栏目，必须传送带有ID的数据给后端。目的，用于识别是新增，还是更新操作。

动态新增代码：

//template()是一个模板格式化函数
$('#modal_pl_content').html(template('modal_temp',{data:''}));

模板代码：

评价ID

5 4 3 2 1

当前数量

Yes

总数：
0of0

删除

事件监听与发送请求代码：

$(document).on("changekeyup",".cksd_comment_id",function(event){
/*varcurrent=event.target.tagName.toLowerCase();
if((current!='input')||(current!='select')){
event.preventDefault();
}
*/
varpraise_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){
varcomment_row={};
$(this).find('input,select').each(function(){
varfield=$(this).attr('name');
comment_row[field]=$(this).val();
});
varpp_id=$("input.cksd_praise_pid").val();//console.log($(this));
varcurrent_form=$(this);
varcomment_id=$(this).children().find("[name='comment_update_id']").val();
vardata={};
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);
});
}});

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐