使用相同的ajax调用处理多个按钮
[英] Handling multiple buttons with same ajax call
本文介绍了使用相同的ajax调用处理多个按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在来自 mysql 的 PHP 循环上用多个按钮填充多个表单.对于每个条目，我有 3 个按钮要使用相同的 ajax 调用来处理.我面临的问题是识别点击了哪个按钮并将其添加到要为 PHP 文件发送的表单数据中
function() {var form = $('#PayBillFormForm0');//每个 PHP 循环都会不同var formMessages = $('#PayBillResults0');//每个 PHP 循环都会不同$(form).submit(function(e) {e.preventDefault();var formData = $(form).serialize();$.ajax({类型:'POST'，url: "php/pay.php",//当pay0按钮被点击时url: "php/decline.php",//当拒绝0按钮被点击时数据:表单数据}).完成(功能(响应){var messageAlert = response.type;var messageText = response.message;var alertBox = '<div class="alert ' + messageAlert + '"style="margin-top:10px;"><d style="font-size:12px;">'+ messageText + '</d></div>';(formMessages).html(alertBox);$('#Bill0').delay(3000).fadeOut(2000);//每个PHP循环的Bill0都不同})});}
<div id="PayBillResults0"></div><!-- 显示 Ajax 响应消息 --><div class="card-header"><h1>XXX</h1>
<div class="card-body"><form id="Form0" method="post" action=""><input name="user" id="user" value="user" type="hidden"><input name="id" id="id" value="9" type="hidden"><input name="reciver" id="reciver" value="ppp" type="hidden"><input name="amount" id="amount" value="333.0" type="hidden"><input name="tax" id="tax" value="5.0" type="hidden"><input name="comment" id="comment" value="XXX" type="hidden"></表单><div id="按钮"><div id="支付"><button form="" class="btn btn-success" id="pay0" value="pay0">Pay</button>
<div id="拒绝"><button form="" class="btn btn-danger" id="decline0" value="decline0">Decline</button>
<div id="隐藏"><button form="" id="hide0" class="btn btn-warning" value="hide0">隐藏</button>
我能够通过标记每个表单和标记每个按钮以及具有多个 onclick 函数以及多个 jQuery 代码来执行此操作.任何想法如何将单击的按钮值与表单数据一起发送到 PHP 以进行不同的处理.
解决方案
当用 PHP 循环时，你不应该在元素上使用任何 id.改用类...或者一些数据属性.
您通过向它们添加数字来使用唯一 ID... 很好.但是类更有用，因为您可以向类添加一个事件处理程序......而不是 n 事件处理程序，用于由 PHP 迭代创建的元素.所以它避免了无用的代码重复，只是有意义.
这就是我现在给你的建议.修改您的 PHP 循环，以便创建该 HTML:
(我删除了所有看起来没用的东西)
<div class="PayBillResults"></div><!-- 显示 Ajax 响应消息 --><div class="card-header"><h1>XXX</h1>
<div class="card-body"><表格><input name="user" value="user" type="hidden"><input name="id" value="9" type="hidden"><input name="reciver" value="ppp" type="hidden"><input name="amount" value="333.0" type="hidden"><input name="tax" value="5.0" type="hidden"><input name="comment" value="XXX" type="hidden"></表单><div><div><button class="btn btn-success pay" value="pay">Pay</button>
<div><button class="btn btn-danger下降" value="decline">Decline</button>
<div><button class="btn btn-warning hide" value="hide">隐藏</button>
看到data-id="0"了吗?在这里，您将使用 PHP 迭代计数器获得表单编号.
现在这里是使用一次的客户端脚本(不要循环):
$(document.ready(function(){//更改 URL 以在按钮单击时与 Ajax 一起使用var AjaxUrl = "";$(".pay").on("点击",function(){AjaxUrl = "php/pay.php";$(this).closest(".card").find("form").submit();});$(".decline").on("点击",function(){AjaxUrl = "php/decline.php";$(this).closest(".card").find("form").submit();});//表单提交处理程序$("form").submit(function(e) {e.preventDefault();var card = $(this).closest(".card");var formData = $(this).serialize();formData.append("formNumber",card.data("id"));$.ajax({类型:'POST'，网址:AjaxUrl，数据:表单数据}).完成(功能(响应){var messageAlert = response.type;var messageText = response.message;var alertBox = '<div class="alert ' + messageAlert + '"style="margin-top:10px;"><d style="font-size:12px;">'+ messageText + '</d></div>';card.find(".PayBillResult").html(alertBox);card.delay(3000).fadeOut(2000);})});});//结束准备
因此，点击 .pay 或 .decline 按钮后，用于 Ajax 请求的 URL 会相应更改.
(我不知道第三个按钮的用途)
然后 .closest() 表单提交.而从$(this)，也就是
请注意，提交的表单编号已添加到 formData 中.
您将使用 $_POST['formNumber'] 检索它.
I want to populate multiple forms with multiple buttons on PHP loop from mysql. For each entry, I have 3 buttons to be handled with the same ajax calls. The issue I'm facing is to recognize which button is clicked and added it to the form data to be sent for a PHP file
function() {
var form = $('#PayBillFormForm0'); // will be different for each PHP loop
var formMessages = $('#PayBillResults0'); // will be different for each PHP loop
$(form).submit(function(e) {
e.preventDefault();
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: "php/pay.php", // When pay0 button is clicked
url: "php/decline.php", // When decline0 button is clicked
data: formData
})
.done(function(response) {
var messageAlert = response.type;
var messageText = response.message;
var alertBox = '<div class="alert ' + messageAlert + '"style="margin-top:10px;"><d style="font-size:12px; ">' + messageText + '</d></div>';
(formMessages).html(alertBox);
$('#Bill0').delay(3000).fadeOut(2000); //Bill0 is different for each PHP loop
})
});
}
<div class="card" id="Bill0">
<div id="PayBillResults0"></div> <!-- To show Ajax Response Message -->
<div class="card-header">
<h1>XXX</h1>
</div>
<div class="card-body">
<form id="Form0" method="post" action="">
<input name="user" id="user" value="user" type="hidden">
<input name="id" id="id" value="9" type="hidden">
<input name="reciver" id="reciver" value="ppp" type="hidden">
<input name="amount" id="amount" value="333.0" type="hidden">
<input name="tax" id="tax" value="5.0" type="hidden">
<input name="comment" id="comment" value="XXX" type="hidden">
</form>
<div id="Buttons">
<div id="Pay">
<button form="" class="btn btn-success" id="pay0" value="pay0">Pay</button>
</div>
<div id="decline">
<button form="" class="btn btn-danger" id="decline0" value="decline0">Decline</button>
</div>
<div id="Hide">
<button form="" id="hide0" class="btn btn-warning" value="hide0">Hide</button>
</div>
</div>
</div>
</div>
I was able to perform this by labeling each form and labeling each button plus having multiple onclick functions as well as multiple jQuery codes. Any idea how to send clicked button value along with form data to PHP to handle differently.
解决方案
When looping with PHP, you should NEVER use any id on elements. Use classes instead... Or some data attributes.
You were using unique ids by adding a number to them... Fine. But a class is more useful since you can add one event handler to a class... Instead of n event handlers for element created by the PHP iterations. So it avoid useless code duplication and just make sens.
That is what I suggest you now. Modify your PHP loop so it will create that HTML:
(I removed all that seemed useless)
<div class="card" data-id="0">
<div class="PayBillResults"></div> <!-- To show Ajax Response Message -->
<div class="card-header">
<h1>XXX</h1>
</div>
<div class="card-body">
<form>
<input name="user" value="user" type="hidden">
<input name="id" value="9" type="hidden">
<input name="reciver" value="ppp" type="hidden">
<input name="amount" value="333.0" type="hidden">
<input name="tax" value="5.0" type="hidden">
<input name="comment" value="XXX" type="hidden">
</form>
<div>
<div>
<button class="btn btn-success pay" value="pay">Pay</button>
</div>
<div>
<button class="btn btn-danger decline" value="decline">Decline</button>
</div>
<div>
<button class="btn btn-warning hide" value="hide">Hide</button>
</div>
</div>
</div>
</div>
See the data-id="0"? That is where you will have your form number using the PHP iteration counter.
Now here is the client-side script to use once (do not loop that):
$(document.ready(function(){
// Change the URL to use with Ajax on button click
var AjaxUrl = "";
$(".pay").on("click",function(){
AjaxUrl = "php/pay.php";
$(this).closest(".card").find("form").submit();
});
$(".decline").on("click",function(){
AjaxUrl = "php/decline.php";
$(this).closest(".card").find("form").submit();
});
// Form submit handler
$("form").submit(function(e) {
e.preventDefault();
var card = $(this).closest(".card");
var formData = $(this).serialize();
formData.append("formNumber",card.data("id"));
$.ajax({
type: 'POST',
url: AjaxUrl,
data: formData
})
.done(function(response) {
var messageAlert = response.type;
var messageText = response.message;
var alertBox = '<div class="alert ' + messageAlert + '"style="margin-top:10px;"><d style="font-size:12px; ">' + messageText + '</d></div>';
card.find(".PayBillResult").html(alertBox);
card.delay(3000).fadeOut(2000);
})
});
}); // End ready
So on .pay or .decline button click, the URL to use with the Ajax request is changed accordingly.
(I don't know the use of the third button)
Then the .closest() form submits. And from $(this), which is the <form>, you can find all the related elements you need.
Notice that the form number that is submitting is added to the formData.
You'll retreive it with $_POST['formNumber'].
这篇关于使用相同的ajax调用处理多个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
