以下是一个基于Ajax的多按钮点击的解决方法的示例代码:
HTML代码:
JavaScript代码:
// 创建XMLHttpRequest对象
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
// code for modern browsers
return new XMLHttpRequest();
} else {
// code for old IE browsers
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
// 处理按钮点击事件
function handleButtonClick(buttonId) {
var xmlhttp = createXMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "ajax_handler.php?button=" + buttonId, true);
xmlhttp.send();
}
// 绑定按钮点击事件
document.getElementById("button1").addEventListener("click", function() {
handleButtonClick(1);
});
document.getElementById("button2").addEventListener("click", function() {
handleButtonClick(2);
});
document.getElementById("button3").addEventListener("click", function() {
handleButtonClick(3);
});
在上面的示例中,我们使用了XMLHttpRequest对象来进行Ajax请求。在点击按钮时,我们调用handleButtonClick函数,并将按钮的ID作为参数传递给它。handleButtonClick函数创建一个XMLHttpRequest对象,并设置其onreadystatechange事件处理函数。在onreadystatechange事件处理函数中,我们检查请求的状态和响应的状态码,如果都满足条件,我们将响应的文本内容设置到result元素中显示出来。
你需要根据实际情况修改ajax_handler.php文件中的处理逻辑,根据传递的按钮ID来执行相应的操作。
上一篇:AJAX堆栈响应来自PHP
下一篇:Ajax多次执行只有一个警报。