5
Tôi đang thực hiện nhiều dịch vụ web dựa trên cuộc gọi ajax. Tôi lắng nghe sự kiện đính kèm mọi yếu tố dom. Và mọi trình xử lý sự kiện đều yêu cầu cuộc gọi ajax trong đó. Nhân tiện, mã nguồn của tôi trở nên bẩn và phức tạp hơn. Tôi muốn giảm mã boilerplate và trông đơn giản hơn với các cuộc gọi ajax.Làm thế nào tôi có thể thực hiện nhiều cuộc gọi ajax jQuery trông đẹp mắt?
Tôi làm cách nào để thực hiện điều đó một cách hiệu quả?
Mẫu mã trông như thế này:
<a href="javascript:void(0);" class="button1">button1</a>
<a href="javascript:void(0);" class="button2">button2</a>
<a href="javascript:void(0);" class="button3">button3</a>
<a href="javascript:void(0);" class="button4">button4</a>
$('.button1').on('click', function() {
$.ajax({
url: '/api/1/resource1',
data: {
value1: 'value1',
value2: 'value2'
},
success: function (response) {
$('.some_dom1').html(Handlebars.resource({items:response.items}));
}
});
});
$('.button2').on('click', function() {
$.ajax({
url: '/api/1/resource2',
data: {
value1: 'value1',
value2: 'value2'
},
success: function (response) {
$('.some_dom2').html(Handlebars.resource({items:response.items}));
}
});
});
$('.button3').on('click', function() {
$.ajax({
url: '/api/1/resource3',
data: {
value1: 'value1',
value2: 'value2'
},
success: function (response) {
$('.some_dom3').html(Handlebars.resource({items:response.items}));
}
});
});
$('.button4').on('click', function() {
$.ajax({
url: '/api/1/resource4',
data: {
value1: 'value1',
value2: 'value2'
},
success: function (response) {
$('.some_dom4').html(Handlebars.resource({items:response.items}));
}
});
});
Cập nhật:
Mỗi tên lớp và xử lý phản ứng ajax là không giống nhau. Ví dụ mã chỉ cho thấy mã boilerplate và phức tạp. Đây không phải là vấn đề của tên lớp hoặc báo cáo if else.
Mỗi tên lớp và trình xử lý phản hồi ajax không giống nhau. – gentlejo