多个按钮在一个页面上调用单独的AJAX函数



当我在一个页面上有多个按钮时,如何识别发出不同AJAX请求的不同按钮?请参阅下面的代码/脚本(button1到switch_on.php,button2到switch_off.php(。如何在1页内将特定按钮链接到特定函数?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Update MySQL</h2></div>
<button switch-ONid=“1” class="loadButton">Switch ON</button>
<button switch-OFFid=“0” class="loadButton">Switch OFF</button>
</body>
</html>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url: "switch_on.php",
success: function(result){
$("#div1").html(result);
}
});
});
});
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url: "switch_off.php",
success: function(result){
$("#div1").html(result);
}
});
});
});
</script>

您可以简单地为它们设置id

<button id="btnOn" class="loadButton">Switch ON</button>
<button id="btnOff" class="loadButton">Switch OFF</button>

您的javascript:

<script>
$(document).ready(function(){
$("#btnOn").click(function(){
$.ajax({
url: "switch_on.php",
success: function(result){
$("#div1").html(result);
}
});
});

$("#btnOff").click(function(){
$.ajax({
url: "switch_off.php",
success: function(result){
$("#div1").html(result);
}
});
});
});
</script>

最新更新