Javascript Ajax中的模态IF_Javascript_Php_Jquery_Html_Ajax

Javascript Ajax中的模态IF

javascript php jquery html ajax

Javascript Ajax中的模态IF,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我正在做一个域名注册，我有两个模态。在我的Ajax上，我确保如果它返回1，它将显示一个警报，说明该域可用。如果返回0，它将显示一个警报，说明域不可用。但是，我想用引导模式替换此警报。问题是，当域不可用时，它返回可用域的模式 JS: HTML: 可用域！粪便不可用的域名！粪便 PHP: 您只是从div中删除了隐藏类，而不是从特定模态中删除，因此它始终显示第一个模态，这适用于可用的情况。另外，两个模式的id都相同，因此使用id也不适用于您将模态div id更改为唯一id（如可用和不可

我正在做一个域名注册，我有两个模态。在我的Ajax上，我确保如果它返回1，它将显示一个警报，说明该域可用。如果返回0，它将显示一个警报，说明域不可用。但是，我想用引导模式替换此警报。问题是，当域不可用时，它返回可用域的模式

JS:

HTML:


可用域！
粪便
不可用的域名！
粪便

PHP:

您只是从div中删除了

隐藏

类，而不是从特定模态中删除，因此它始终显示第一个模态，这适用于可用的情况。另外，两个模式的id都相同，因此使用

id

也不适用于您

将模态div id更改为唯一id（如

可用

和

不可用

），并使用这些id显示模态。当您使用引导模式时，请使用其方法显示和隐藏模式，如

.modal（'show'）

和

.modal（'hide'）

请参阅下面的代码

JS:

HTML:


可用域！
粪便
不可用的域名！
粪便

第x十万次：ID在HTML文档中必须是唯一的。

$(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!");
      });
  });
});

    <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>

<?
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;
}
?>

 $(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!");
          });
      });
    });

 <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>