单击使用ajax的链接时如何使弹出模式出现？答案

【问题标题】：How to make popup modal appear when clicking a link using ajax?单击使用ajax的链接时如何使弹出模式出现？
【发布时间】：2021-05-18 05:39:40
【问题描述】：

我有几个链接，当用户单击链接时，它将显示为弹出模式。但是，我所做的是出现模态但没有内容。我是 ajax 新手，所以我完全不明白我应该怎么做。下面是我的 HTML：

<div class="modal fade" id="answerModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title">ANSWER</h4>
    <button type="button" class="close" data-dismiss="modal">&times;</button>
  </div>
<div class="modal-body">
</div>
  <div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>
</div>
</div>
<a data-toggle="modal" class="btn" href=#link1 data-target="#answerModal"> VIEW ANSWER → </a>
<a data-toggle="modal" class="btn" href=#link2 data-target="#answerModal"> VIEW ANSWER → </a>
<a data-toggle="modal" class="btn" href=#link3 data-target="#answerModal"> VIEW ANSWER → </a>

下面是我的脚本：

$(document).ready(function(){
$('.btn').click(function(){
  var link = $(this).data('url');
  console.log(ok);
  // AJAX request
  $.ajax({
    url: link,
    type: 'get',
    data: link,
    success: function(response){ 
    // Add response in Modal body
      $('.modal-body').html(response);
    // Display Modal
    $('#answerModal').modal('show'); 
    }
  });
});});});

This is how my modal looks like.

【问题讨论】：

不明白你的问题是什么，你的期望是什么，你能澄清一下吗？
@maulikbafalipara 当我单击链接时，它应该在弹出模式中显示一个页面。这有意义吗？目前，我的弹出模式不显示我点击的链接。
请提供有效数据您的脚本中有错误，并且 HTML 中缺少数据值。
@maulikbafalipara 对不起。你能告诉我脚本中的错误在哪里吗，因为我真的不明白它是如何工作的，这就是我遇到这个问题的原因。
我添加了一个答案，请检查它，如果您有任何疑问，请告诉我。

标签： javascript ajax twitter-bootstrap hyperlink modal-dialog

【解决方案1】：

我对您的代码进行了一些更改，请在下面查看。如果 API 未响应成功或链接为空白，则还添加了错误模式显示。

您在 js "});" 的末尾添加了一个额外的右括号。

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Demo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

    <script src="https://code.jquery.com/jquery-3.5.1.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>

  <body>
    <div class="modal fade" id="answerModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">ANSWER</h4>
            <button type="button" class="close" data-dismiss="modal"> &times; </button>
          </div>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button>
          </div>
        </div>
      </div>
    </div>
    <a class="btn" href="javascript:void(0)" data-url="https://jsonplaceholder.typicode.com/todos/1"> VIEW ANSWER → </a>
    <a class="btn" href="javascript:void(0)" data-url="https://jsonplaceholder.typicode.com/todos/2"> VIEW ANSWER → </a>
    <a class="btn" href="javascript:void(0)" data-url=""> VIEW ANSWER → </a>
    <a class="btn" href="javascript:void(0)" data-url="https://jsonplaceholder.typicode.com/abcd"> VIEW ANSWER → </a>
    <script>
      $(document).ready(function() {
        $(".btn").click(function() {
          var link = $(this).data("url");
          console.log(link);
          // AJAX request
          if (link == undefined || link == '') {
            $(".modal-body").html("<p>if link is not available then Your error message display here!!!</p>");
            $("#answerModal").modal("show");
          } else {
            $.ajax({
              url: link,
              type: "get",
              data: link,
              success: function(response) {
                console.log(response)
                console.log("api successful");
                $(".modal-body").html(JSON.stringify(response));
                $("#answerModal").modal("show");
              },
              error: function(response) {
                $(".modal-body").html("<p>Please try after some time...</p>");
                $("#answerModal").modal("show");
              },
            });
          }
        });
      });
    </script>
  </body>

</html>

【讨论】：

【解决方案2】：

以下是一些需要进行的更改和检查。

从您的<a> 标记中删除data-toggle 和data-target，因为无论api 调用是否成功，它们最终都会打开模式。如果 API 失败，则不会以模式显示内容。
在你的api调用成功函数中添加console.log来确认api调用是否成功。
确保var link = $(this).data("url"); 不是未定义的。

我还使用占位符 api 调用添加了一个工作 sn-p 仅供您参考，将它们替换为您想要点击的实际网址。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
            integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <div class="modal fade" id="answerModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">ANSWER</h4>
                        <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                        >
                            &times;
                        </button>
                    </div>
                    <div class="modal-body"></div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-default"
                            data-dismiss="modal"
                        >
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <a class="btn" href="javascript:void(0)" data-url="https://pokeapi.co/api/v2/language/5"> VIEW ANSWER → </a>
        <a class="btn" href="javascript:void(0)" data-url="https://pokeapi.co/api/v2/language/6"> VIEW ANSWER → </a>
        <a class="btn" href="javascript:void(0)" data-url="https://pokeapi.co/api/v2/language/7"> VIEW ANSWER → </a>
        <script
            src="https://code.jquery.com/jquery-3.5.1.js"
            integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
            crossorigin="anonymous"
        ></script>
        <script>
            $(document).ready(function () {
                $(".btn").click(function () {
                    var link = $(this).data("url");
                    console.log(link);
                    if(!link || (link === '')){
                        $(".modal-body").html("<p>Invalid link!</p>");
                        $("#answerModal").modal("show");
                        return;
                    }
                    // AJAX request
                    $.ajax({
                        url: link,
                        type: "get",
                        data: link,
                        success: function (response) {
                            // Add response in Modal body
                            console.log(response)
                            console.log("api successful");
                            $(".modal-body").html(JSON.stringify(response));
                            // Display Modal
                            $("#answerModal").modal("show");
                        },
                        error: function(err){
                            $(".modal-body").html(err.responseText);
                            $("#answerModal").modal("show");
                        }
                    });
                });
            });
        </script>
    </body>
</html>

【讨论】：

感谢您的帮助，但它似乎不起作用，因为每个 <a> 的 url 都不同。例如<a href="www.google.com"></a>、<a href="www.yahoo.com"></a>。所以<script> 中的url: 是基于点击的链接。但必须以模态形式出现。这有意义吗？
现在检查，我已更新解决方案以点击标签 url 数据属性中指定的链接。

【解决方案3】：

您可以使用Sweet Alert 2，它为您管理模式弹出窗口。然后，您可以将链接实现为：

<a href="YOUR LINK" onclick="popup()">This is a link!</a>

这是一些启动 JavaScript 代码（您可以添加自己的东西）：

function popup(){
    Swal.fire(){
        title: "Hey you clicked the link!"
    }
}

要充分利用 Sweet Alert 2，您可以通过其website 访问文档和一些示例

【讨论】：