ajax保存并关闭,jQuery结合ajax之编辑、取消和保存综合功能【原创】

主要说的是最近一个项目中的一个模块。里面包含了许多综合的知识，还有一些我们需要注意的地方。效果图如下：

部分JS代码如下：

//业务编辑

$('body').on('click', '.business_edit_btn', function () {

var obj = $(this).siblings('.business_price_span');

var price = (obj.children('.money').text()).trim();//trim()函数用于删除字符串空格

obj.children('.money').html('');

$(this).hide();

$(this).siblings(".business_cancel_btn").show();

$(this).siblings(".business_submit_btn").show();//点击编辑，出现取消、保存按钮

var parent_id = $(this).siblings(".describe1").data('parent-id');

var business_type_id = $(this).siblings(".describe2").data('business-type-id');

var business_name = $(this).siblings(".describe3").text();//获取select属性值,input的值

var html1 = "";

var selected = '';

$.each( business_types, function (index, item) {

if ( parent_id == index) {

selected = 'selected';

} else {

selected = '';

}

html1 += '' + item['business_type_name'] + '';

})//将后台返回的数据遍历，即第一个下拉框的值

html1 += "";

var html2 = "";

var children = business_types[parent_id]['children'];

var selected_business = '';

$.each( children, function (index, item) {

if ( business_type_id == item['business_type_id']) {

selected_business = 'selected';

} else {

selected_business = '';

}

html2 += '' + item['business_type_name'] + '';

});

html2 += "";//根据第一个下拉框的值，遍历出第二个下拉框的值，即联动菜单

var html3 = ''; //改变html属性

$(this).siblings(".describe1, .describe2, .describe3").hide();//隐藏原先的span标签

$(this).parent("td").append(html1,html2,html3);//将生成的元素追加到表格中

});

//业务取消

$('body').on('click', '.business_cancel_btn', function() {

var moneyVal=$(this).siblings(".business_price_span").find("input").val();

var text="总金额:"+moneyVal+" 元";

var price_reset = $(this).siblings(".business_price_span").find("input[name='price']").data("price");

//将原先表单的值隐藏在data属性中，在这里获取

$(this).siblings(".business_price_span,.money,.select1,.select2,.input1").remove();

$(this).siblings(".describe1, .describe2, .describe3").show();

$(this).after(text);//追加总金额

$(this).hide();

$(this).siblings(".business_submit_btn").hide();

$(this).siblings(".business_edit_btn").show();

$(this).siblings(".business_price_span").children(".money").text(price_reset);

//重置数据。这里不能使用reset方法，因为表单中的input是生成的，而且不止一个。

})

//业务金额保存

$('body').on('click', '.business_submit_btn', function () {

var business_id = $(this).data('id');

var price = $(this).siblings('.business_price_span').find('input').val();

var business_name = $(this).siblings(".input1").val();

var business_type_id = $(this).siblings(".select2").val();

var parent_id = $(this).siblings(".select1").val();

var parent_name = $(this).siblings(".select1").find("option:selected").text();

var business_type_name = $(this).siblings(".select2").find("option:selected").text();

var that = $(this);//将$(this)赋给一个变量

$.ajax({

url: 'index.php?c=business&a=updatePrice&business_id=' + business_id,

type: 'post',

data: {business_name: business_name, business_type_id: business_type_id, price: price},

success: function (data) {

var data = $.parseJSON(data);

if (data.flag == 1) {

if (price > 0 ) {

var html = '';

html += '

html += '

款项进展

';

html += '';

that.after(html);

}//判断如果金额大于0 ，出现款项进展按钮

that.siblings(".describe1").text(parent_name + "->").show();

that.siblings(".describe2").text(business_type_name + "->").show();

that.siblings(".describe3").text(business_name).show();

that.siblings(".select1, .select2, .input1").remove();

that.siblings(".business_price_span").find(".money").html(''+ price + '')//点击保存时，追加数据

that.hide();

that.siblings(".business_cancel_btn").hide();

that.siblings(".business_edit_btn").show();

} else {

alert(data.content);

}

}

})

})

代码中的功能就不一一解释了，主要是想说其中需要注意的地方。

比如：

1、AJAX里面$(this)是不起作用的。

在jQuery使用ajax后$(this)失效，原因很简单，$(this)指向的是最近调用它的jquery对象，即$(this)就是表示ajax对象了。在AJAX的success里面应该指向的是一个Deferred对象。而$(this)一般是用来将一个dom节点转换成jquery对象，所以在ajax的success里面无效了。

解决办法也是很简单，在使用$.ajax({})前将$(this)赋给一个变量后即可在$.ajax({})内使用。

2、html()、text()与val()的区别。

对于text()和html()来说，获取元素内部的值的用法基本上是一样的，结果是由所有匹配元素包含的文本内容组合起来的文本，所以xml和html都可以获取(元素闭合)。

而对于val() 则是获得第一个匹配元素的当前值，比如利用这个方法将获得的是input 元素的value值，而利用text()方法是获取不到的，因为不是闭合元素。

还有其他的一些细节，由于时间问题，就不一一描述了。

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/5836.html

微信打赏

支付宝打赏

感谢您对作者Eva的打赏，我们会更加努力！    如果您想成为作者，请点我