gpt4 book ai didi

javascript - Ajax 中的模态 IF

转载 作者:行者123 更新时间:2023-12-02 22:21:33 26 4
gpt4 key购买 nike

我正在进行域名注册,并且有两个模式。在我的 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;
}
?>

最佳答案

您只是从 div 中删除 hide 类,而不是从特定模式中删除,因此它始终显示第一个模式,适用于可用情况。另外,两个模式都有相同的 id,因此使用 id 也不适合您。

将模态 div id 更改为唯一的 id(例如 availableunavailable),并使用这些 id 来显示模态。当您使用 bootstrap 模式时,请使用其方法来显示和隐藏模式,例如 .modal('show').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>

关于javascript - Ajax 中的模态 IF,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59213698/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com