如何根据 Javascript/AJAX 数据库调用的结果显示 HTML 模态

Question

我目前正在使用 html 和 Javascript 开发一款 Facebook 游戏。现在我在 html 页面上有两个模态框（ModalA 和 ModalB），我试图将它们都附加到一个按钮上，但是当单击该按钮时应该只出现一个模态框。出现的模式取决于对我的数据库的检查结果。

每当用户单击该按钮时，我想运行使用 Javascript 函数检查我的数据库，该函数通过 AJAX 将用户的 Facebook ID 发送到我的数据库。这会检查数据库中的某个值，然后发回“0”或“1”作为对 AJAX 调用的响应。

如果返回的响应是“0”，那么我希望网页上出现模态A，但是如果响应是“1”，那么我希望模态B出现。

我知道 AJAX 是异步的，所以如果我理解正确的话，我需要使用类似 e.preventDefault(); 的东西让它等待数据库的响应？

现在我可以通过使按钮的 href = 模态地址来使模态出现，如下所示：

<td align="center"><a href="#openModalA"><img src="button.png" width="100" height="50"></a></td>

但是这段代码直接位于我页面的源代码中，我不确定如何使用 Javascript 函数动态设置 html "a href" 地址。

我的两个模态地址是：#openModalA 和#openModalB。（这些模式的代码位于它们出现的 html 页面的源代码中）。

这是我的 html 按钮：

<td align="center"><a href= ??? ><img src="button.png" width="100" height="50"></a></td>

这是我目前的 Javascript 和 AJAX:

function openModal() {

//getting user's Facebook ID
FB.login(function(response) {
  if (response.authResponse) {

     FB.api('/me', function(response) {

     if (response.error) {
       console.log('Error - ' + response.error.message);
     }
     else {
       var userid = response.id;

  e.preventDefault(); 

       $.ajax({
         url: 'scripts/checkmodal.php',
         data: {'userid' : userid},
        type: "POST",
        success: function(response){

                 if(response=="0"){
                          window.location.href = $link.attr('#openModalA');
                         }
                    else{
                         window.location.href = $link.attr('#openModalB');
                      console.log(response);
                              }
                    }
       });
     }
    });
  } else {
    console.log('User cancelled login or did not fully authorize.');
  }
 });
}

我不知道如何 link 这个 Javascript 到 html 按钮的地址，或者如果我做一些非常根本的错误。

非常感谢任何对此的帮助，在此先感谢！

更新

这是我目前拥有的代码：

html 中的按钮：

<td align="center"><a id="yourAnchor" href><img src="button.png" width="100" height="50" onClick=openModal();></a></td>

Javascript:

    function openModal() {

    //getting user's Facebook ID
    FB.login(function(response) {
      if (response.authResponse) {

         FB.api('/me', function(response) {

         if (response.error) {
           console.log('Error - ' + response.error.message);
         }
         else {
           var userid = response.id;

     var $link = $('#yourAnchor');

           if($.ajax({
            url: 'scripts/checkmodal.php',
            data: {'userid' : userid},
            type: "POST",
     async: false
     }).responseText == 0){
          window.location.href = $link.attr('#openModalA');
                             }
                        else{
          window.location.href = $link.attr('#openModalB');
                          console.log(response);
                                  }
                        };
        });
      } else {
        console.log('User cancelled login or did not fully authorize.');
      }
     });
    }

Answer 1

要设置 href，您可以按照 this question 的说明进行操作：

$("a").attr("href", "http://www.google.com/")

如果您确实需要等待 AJAX 响应，您可以进行同步 AJAX 调用。我找到了一个很好的 question/answer 给你描述如何去做。

你基本上必须添加属性

async: false

并用

收集结果

.responseText

您可以为您的锚点提供预期的 ID，这样 JQuery 可以通过 ID 找到它：

<a id="yourAnchor" href></a>

之后，您的代码将大致如下所示：

var $link = $('#yourAnchor');

if ($.ajax({
     url: 'scripts/checkmodal.php',
     data: {'userid' : userid},
     type: "POST",
     async: false
   }).responseText == 0){
     window.location.href = "#openModalA";
   }
   else{
     window.location.href = "#openModalB";
   }

如何根据 Javascript/AJAX 数据库调用的结果显示 HTML 模态

How to display a HTML modal, depending on result of Javascript/AJAX database call

html

javascript

ajax

asynchronous

modal-dialog