如何为两个按钮复用同一AJAX函数并根据点击按钮打开对应PHP页面

首先得先修正你HTML里的几个小问题：两个按钮的id都是login，这不符合HTML规范（id必须唯一），而且按钮的属性写法有错误（style="..."= "btn btn-primary"这里多了个多余的等号，应该把class属性单独声明）。

接下来，我们可以通过自定义data属性给每个按钮绑定对应的目标页面，点击按钮时记录这个目标页面，最后在AJAX登录成功后使用记录的值打开正确的页面。具体实现步骤如下：

第一步：修改按钮的HTML代码 #

给每个按钮添加唯一标识，并用data-target-page属性存储对应的PHP页面路径：

<html>
<body>
<div>
  <!-- 修正id、class属性，新增data-target-page绑定目标页面 -->
  <input type="submit" name="export_btn" id="export_page1" class="btn btn-primary" style="float: right; margin-right: 5px;" 
         value="Export Page 1" data-toggle="modal" data-target="#loginModal" data-target-page="Page 1.php"/>
  <input type="submit" name="export_btn" id="export_page2" class="btn btn-primary" style="float: right; margin-right: 5px;" 
         value="Export Page 2" data-toggle="modal" data-target="#loginModal" data-target-page="Page 2.php"/>
</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>
</div>
</div>
</div>
</div>

第二步：修改JS代码，记录并使用目标页面 #

我们需要在用户点击导出按钮时存储对应的目标页面，然后在AJAX登录成功后读取这个值：

// 存储目标页面的变量
let targetExportPage = '';

// 监听所有导出按钮的点击事件
$('[name="export_btn"]').click(function() {
  // 从按钮的自定义data属性中提取目标页面
  targetExportPage = $(this).data('target-page');
});

// 登录按钮点击事件
$('#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
        {
          // 用Bootstrap官方方法关闭模态框，而非直接hide()
          $('#loginModal').modal('hide');
          // 打开之前记录的目标页面
          window.open(targetExportPage);
        }
      }
    });
  }
  else
  {
    alert("Both fields are required"); // 修正拼写错误requried -> required
  }
});

关键细节说明 #

1. 自定义data属性：data-target-page是HTML5允许的自定义属性，专门用来存储和元素关联的额外数据，非常适合这种需要绑定页面路径的场景。
2. Bootstrap模态框关闭：原来的$('#loginModal').hide()不是标准关闭方式，用modal('hide')能触发模态框的关闭事件，避免出现界面残留问题。
3. 无全局变量的替代方案：如果你不想用全局变量，可以把目标页面存在模态框的data属性里，比如$('#loginModal').data('target-page', $(this).data('target-page'))，后续用$('#loginModal').data('target-page')获取，代码结构更优雅。

这样修改后，不管后续新增多少个导出按钮，只要给按钮添加对应的data-target-page属性，就能复用同一个AJAX函数啦！

内容的提问来源于stack exchange，提问作者Naik