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

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

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

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

实际情况：

动态新增代码：

// 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); 
 }); 
}});