我想要php结果，但在获取它之前，加载gif图像应该显示在div部分。
<!DOCTYPE html>
<html>
<head>
<title>
CTR Calculator Tool | Free Click Through Rate Online Calculator
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="myForm" method="post">
Clicks: <input name="name" id="name" type="text" /><br />
Impressions: <input name="email" id="email" type="text" /><br />
<input
type="button"
id="submitFormData"
onclick="SubmitFormData();"
value="Submit"
/>
</form>
<br />
Your data will display below..... <br />
==============================<br />
<div id="loader" style="display: none">
<img src="ajax-loader.gif" />
<!-- All data will display here -->
</div>
<div id="results"></div>
<script>
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
$.post("submit.php", { name: name, email: email }, function (data) {
$("#results").html(data);
$("#myForm")[0].reset();
});
}
</script>
</body>
</html>
我想在从服务器获取结果之前显示加载图像。但是出现问题
使用JQuery
$("#loader").show();
$("#loader").hide()
在发送表单之前，将div显示样式更改为block。当响应返回时，将其改回"无"。
额外注意。我建议将当前添加到$post方法的回调转换为promise/async-await，因为回调可能会令人困惑。
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var loader = document.getElementById("loader");
loader.style.display = "block";
$.post("submit.php", {name: name, email: email},
function(data) {
$('#results').html(data);
$('#myForm')[0].reset();
loader.style.display = "none";
});
}
//or just use async/await which is easier
async function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var loader = document.getElementById("loader");
loader.style.display = "block";
const data = await $.post("submit.php", {name: name, email: email});
$('#results').html(data);
$('#myForm')[0].reset();
loader.style.display = "none";
}