时间戳

首页 > 解决方案 > Ajax 中的模态 IF

javascript - Ajax 中的模态 IF

问题描述

我正在做一个域名注册，我有两个模式。在我的 Ajax 上，我确保如果它返回 1，它会显示一个警告，指出域可用。如果它返回 0，它将显示一条警告，指出该域不可用。但是，我想用 Bootstrap 模态替换这个警报。问题是当域不可用时，它返回可用域的模态。

JS： 

$(document).ready(function() {
  $("#salvar-form").click(function() {
    const www = $('.www-ajax').val();
    const dominio = $('.dominio-ajax').val();
    const com = $('#com').val();
    $.ajax({
        method: "POST",
        url: "validardominio.php",
        data: {
          protocol: www,
          dominio: dominio,
          com: com
        },
        beforeSend: function() {
          alert("ENVIANDO...");
        }
      })
      .done(function(dominio) {
        if (dominio == 1) {
          alert('Disponível.');
          $('div').removeClass("hide");
        } else if (dominio == 0) {
          alert('Indisponível');
          $('div').removeClass("hide");
        }
      })
      .fail(function() {
        alert("Não foi possível enviar, tente novamente!");
      });
  });
});

HTML：

    <head>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>

    <form action="validardominio.php" method="POST" id="ajax-form" class="form-inline">
      <button type="button" id="salvar-form" class="btn btn-dominio btn-outline-danger" name="enviar" value="Enviar" data-toggle="modal" data-target="#ExemploModalCentralizado"></button>
      <div class="modal fade hide" id="ExemploModalCentralizado" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-body">
              Available Domain!
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade hide" id="ExemploModalCentralizado" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-body">
              Unavailable domain!
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
          </div>
        </div>
      </div>
    </form>

PHP：

<?
if (!empty($_POST)) {

    $dominio = $_POST['dominio'] . $_POST['com'];

    function dominio_disponivel($dominio)
    {
        if (checkdnsrr($dominio, 'ANY') && gethostbyname($dominio) != $dominio)
            return false;
        else
            return true;
    }

    if (dominio_disponivel($dominio))
        echo 1;

    else
        echo 0;
}
?>

标签： javascriptphpjqueryhtmlajax

解决方案

您只是hide从 div 而不是从特定模式中删除类，因此它始终显示第一个模式，这适用于可用案例。此外，两种模式的 id 相同，因此使用id也不适用于您。

将模态 div id 更改为唯一 id（如available和unavailable）并使用这些 id 显示模态。当您使用引导模态时，然后使用它的方法来显示和隐藏模态，例如.modal('show')and .modal('hide')。

见下面的代码

JS：

 $(document).ready(function() {
      $("#salvar-form").click(function() {
        const www = $('.www-ajax').val();
        const dominio = $('.dominio-ajax').val();
        const com = $('#com').val();

        //hide both modals first
        $('#availableModal').modal("hide");
        $('#unavailableModal').modal("hide");

        $.ajax({
            method: "POST",
            url: "validardominio.php",
            data: {
              protocol: www,
              dominio: dominio,
              com: com
            },
            beforeSend: function() {
              alert("ENVIANDO...");
            }
          })
          .done(function(dominio) {
            if (dominio == 1) {
              alert('Disponível.');
              $('#availableModal').modal("show");
            } else if (dominio == 0) {
              alert('Indisponível');
              $('#unavailableModal').modal("show");
            }
          })
          .fail(function() {
            alert("Não foi possível enviar, tente novamente!");
          });
      });
    });

HTML：

 <head>
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>

    <form action="validardominio.php" method="POST" id="ajax-form" class="form-inline">
      <button type="button" id="salvar-form" class="btn btn-dominio btn-outline-danger" name="enviar" value="Enviar" data-toggle="modal" data-target="#ExemploModalCentralizado"></button>
      <div class="modal fade hide" id="availableModal" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-body">
              Available Domain!
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade hide" id="unavailableModal" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-body">
              Unavailable domain!
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
          </div>
        </div>
      </div>
    </form>

推荐阅读