为两个按钮触发AJAX单一函数

我使用2个按钮打开两个独立的php页面，但我想使用一个函数来触发这两个按钮。被触发的AJAX函数应该检查按下了哪个按钮，然后打开与它相关联的php页面。这样"导出第1页";打开Page 1.php和Export Page 2;应该打开Page 2.php。我可以用AJAX函数打开一个php页面。现在我如何检查哪个按钮被按下，以便我可以打开正确的php页面。我该如何做到这一点?

<html>
<body>
<div> 
<input type ="submit" name="login" id="login" style="float: right; margin-right: 5px;" class= "btn btn-primary" value="Export Page 1" data-toggle="modal" data-target="#loginModal"/>
<input type ="submit" name="login" id="login" style="float: right; margin-right: 5px;" class= "btn btn-primary" value="Export Page 2" data-toggle="modal" data-target="#loginModal"/>
</div>
</body>
</html>
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<label>Username</label>
<input type="text" name="username" id="username" class="form-control" />
<br/>
<label>Password</label>
<input type="password" name="password" id="password" class="form-control" />
<br/>
<button type="button" name="login_button" id="login_button" class="btn btn-primary">Login</button>
<script>
$('#login_button').click(function(){
var username = $('#username').val();
var password = $('#password').val();
if(username != '' && password != '')
{
$.ajax({
url:"Login.php",
method:"POST",
data:{username:username, password:password},
success:function(data){
if(data == 'No')
{
alert("Wrong Data");
}
else
{
$('#loginModal').hide();
window.open("Page 1.php"); //For page 1
// OR window.open("Page 2.php"); //For page 2
}
}
});
}
else
{
alert("Both fields are requried");
}

});
});
</script>

因为ID必须是唯一的，所以给每个按钮一个不同的ID

<input type="submit" id="login1" value="Export Page 1"...
<input type="submit" id="login2" value="Export Page 2"...

你可以给两个按钮相同的事件-这也可以工作，如果你给他们两个相同的类，并在该类上执行事件。

在事件中，将按钮id存储在某个地方，以便稍后被模式的登录按钮拾取。

因为你是自动打开模态的，所以从open-dialog with button1/2到click login on模态是分开的，所以它们是不相关的。你需要在modal/global/etc中存储哪个按钮是用来打开modal的，这样你就可以在实际登录时使用这个值。

让我们将它存储在模式的login_button:

$("#login1,#login2").click(function() {
$("#login_button").data("source_button", this.id);
});

这个地方。Id将为login1或login2。

现在，当单击login_button时，我们可以看到它是哪个按钮:

$("#login_button").click(function() {
$.ajax({
method: "POST",
data: { username: username, password: password },
success: function(data) {
$('#loginModal').hide();
var source_button = $("#login_button").data("source_button");
if (source_button == "login1")
window.open("Page 1.php");
else
window.open("Page 2.php");
}
});
});

为了使其更可用(并减少维护负担)，您可以做一些小更改:

不要在页面按钮上使用ID
将目标页面编码到页面按钮上

<input type="submit" class="pagelogin" data-page='page1.php' value="Export Page 1"...
<input type="submit" class="pagelogin" data-page='page2.php' value="Export Page 2"...

然后

$(".pagelogin").click(function() {
$("#login_button").data("page", $(this).data("page"));
});

和回调

success: function() {

$('#loginModal').hide();
window.open($("#login_button").data("page"))
}

所以当你想添加page3等你只是添加一个新的输入没有代码的变化，并保持数据(page1.php)从代码(js)的分离，这总是一件好事(tm)。

您可以使用函数:

function openPage(page) {
$.ajax({
method:"POST",
data:{
username:username, password:password
},
success:function(data) {
$('#loginModal').hide();

window.open(page); 
}   
});
}

在html:

<input type="submit" onclick="openPage('Page 1.php')" name="login" id="login" style="float: right; margin-right: 5px;" class= "btn btn-primary" value="Export Page 1" data-toggle="modal" data-target="#loginModal"  />
<input type="submit" onclick="openPage('Page 2.php')" name="login" id="login" style="float: right; margin-right: 5px;" class= "btn btn-primary" value="Export Page 2" data-toggle="modal" data-target="#loginModal" />

您也可以使用数据集为两个按钮创建一个单一的函数，使用event参数从所单击的元素中提取data-page并通过它

function submitButtonHandler(e) {
var targetPage = e.target.dataset.page;
console.log('Target is ' + targetPage);
}
window.addEventListener('load', function() {
document.getElementById('button1').addEventListener('click', submitButtonHandler);
document.getElementById('button2').addEventListener('click', submitButtonHandler);
});

<input type="submit" value="Login 1" data-page="Page 1" id="button1">
<input type="submit" value="Login 2" data-page="Page 2" id="button2">

相关内容

最新更新

热门标签：