需求：用戶填寫的東西个少，必須要實(shí)時(shí)保存
分析：監(jiān)聽用戶操作事件夜焦，如：change、keyup 等巷波，向后端發(fā)送請(qǐng)求
實(shí)際情況：
- 用戶填寫的表單卸伞，是通過 JavaScript 動(dòng)態(tài)新增的，這就需要使用為動(dòng)態(tài)新增元素綁定事件垮耳。
- 發(fā)送請(qǐng)求給后端终佛，取決于前面的必填項(xiàng)是否已經(jīng)完整填寫。
- 必須區(qū)分用戶是動(dòng)態(tài)新增了填寫欄目呢查蓉？還是在修改豌研？
- 當(dāng)前事件對(duì)象是什么唬党？怎么通過該對(duì)象獲取用戶輸入的數(shù)據(jù)驶拱？
- 用戶多次修改同一欄目，必須傳送帶有 ID 的數(shù)據(jù)給后端阴孟。目的税迷，用于識(shí)別是新增箭养，還是更新操作。
動(dòng)態(tài)新增代碼：
// template() 是一個(gè)模板格式化函數(shù)
$('#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">評(píng)價(jià)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">當(dāng)前數(shù)量</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">總數(shù)： <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>
事件監(jiān)聽與發(fā)送請(qǐng)求代碼：
$(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);
});
}});
