时间戳

首页 > 解决方案 > 一个标签的两个目标并在两个不同的div中显示两个结果

javascript - 一个标签的两个目标并在两个不同的div中显示两个结果

问题描述

标签： javascriptphphtmljquery

解决方案

从您的问题来看，您似乎希望在单击链接时在同一页面上的两个单独的 div 中加载两个结果，一个来自 index.php，另一个来自 Documents.php。

但是您在链接上使用了更改事件，而不是单击事件。单击链接时不会触发 change 事件，因此不会执行 JavaScript 并且页面会加载到链接的 href 属性中指定的 URL。所以首先你需要更改$(document).on('change')为$(document).on('click').

此外，由于您希望加载两个结果 - 一个来自 index.php，另一个来自 Documents.php，因此您需要创建两个 ajax 请求，一个到 index.php，另一个用于 Documents.php。在每一个ajax请求的成功函数中，都可以得到响应，放到对应的div中。

除此之外，您还需要在单击链接时阻止页面加载到 href 属性中指定的新页面，否则单击链接时触发的 ajax 请求将在页面加载中丢失。因此，您需要e.preventDefault();像这样向 onclick 事件处理程序添加一个：

$(document).on('click', 'a#link', function(e) {

    // Stop new page from loading
    e.preventDefault();

    // Two ajax requests for index.php and Documents.php
});

更新：您不需要为每个 ajax 请求添加两个单击处理程序。在单击处理程序中，您可以同时放置两个 ajax 请求。

此外，如果您在 jQuery 之前添加事件处理程序，或者在加载 DOM 之前添加它们，您的事件处理程序也不会注册。因此，将您的代码移动到 HTML 页面的底部，就在结束</body>标记之前。

$(document).on('click', 'a#link', function(e) {
  e.preventDefault();
  $.ajax({
      url:"details.php",
      type:'POST',
      success:function(response) {
        var resp = $.trim(response);
        $("#index").html(resp);
        alert(resp);
      }
   });
   $.ajax({
      url:"index.php",
      type:'POST',
      success:function(response) {
        var resp = $.trim(response);
        $("#Documents").html(resp);
        alert(resp);
      }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="index.php?StudentID=1" id="link">Link</a>

推荐阅读