使用jQuery延遲表單輸入並在延遲后在同一頁面上顯示結果
[英]Delay Form Input With jQuery And Display Results On Same Page After Delay
問題描述
我是AJAX的新手，所以我什至不知道從哪里開始。 我嘗試過使用jQuery延遲提交表單，但是該腳本甚至沒有收到POST請求。
我的index.php
<?php
include 'includes.php';
$user_mining_level = 16;
$user_id = 1;
if(isset($_POST['mine'])) {
if($user_mining_level == 1) {
$random_ore = rand(1, 2);
}
if($user_mining_level > 15) {
$random_ore = rand(1, 3);
}
$random = rand(1, 5);
$xp_gained = $random * $ore_xp["$random_ore"];
$random_ore_name = $ore["$random_ore"];
$stmt = $conn->prepare('UPDATE invy_ores SET `' . $random_ore_name . '` = `' . $random_ore_name. '` + ' . $random . ' WHERE user_id = :user_id');
$stmt->bindValue(":user_id", $user_id, PDO::PARAM_INT);
$stmt->execute();
$result = 'You\'ve managed to mine ' . $random . ' ' . $ore["$random_ore"] . ' and gained ' . $xp_gained . ' EXP!';
}
?>
<!DOCTYPE html>
<html>
<head>
<title>RuneScape Click Game</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<div id="result"><?php echo $result; ?></div>
<form action="index.php" method="POST" class="gather">
<input type="submit" name="mine" value="Mine" id="ajax_bt"/>
</form>
</body>
為了使此方法理想地工作，我需要將表單提交延遲大約3秒鍾，並且$result變量中的數據可以在<div id="result"></div>元素中<div id="result"></div> 。 我一直在尋找有關如何執行此操作的時間，但似乎找不到答案。 有人可以給我看個例子還是指導我正確的方向？
編輯：
這似乎有點接近我想做的事，但是延遲后表格無法正常工作。
$(document).ready(function() {
$(".gather").submit(function (e) {
e.preventDefault();
var form = this;
$("<img src='loader.gif' alt='Loading...' />").appendTo("#result");
$("result").hide();
setInterval(function () {
form.submit();
}, 1000); // in milliseconds
});
});
3 個解決方案
解決方案1
1 2015-03-18 21:24:21
在表單上輸入一個ID
<form action="index.php" id="myForm" method="POST" class="gather">
<input type="submit" name="mine" value="Mine" id="ajax_bt"/>
</form>
並在您的JavaScript中使用set timeout
<script>
$('#myform').submit(function(ev){
ev.preventDefault();
setTimeout(function(){
$('#myform').submit();
},3000);
});
</script>
解決方案2
0 已采納 2015-03-18 21:17:31
如果要延遲表單發布，可以使用setTimeout() javascript函數。
$('form').submit(function(e){
e.preventDefault();
var form = $(this);
setTimeout(function(){
$.post('index.php',form.serialize(),function(html){
var result = $(html).find('#result').html();
$('#result').html(result);
});
},3000);
});
這將等待3秒鍾，然后執行ajax調用，將表單提交到您的頁面。
您還應該添加一個隱藏的輸入，以便將其發布到您的頁面上，因為$.serialize()不會包含“提交”按鈕：
<input type="hidden" name="mine" value="1" />
更新：
查看您的其他js代碼，我發現問題出在您的onSubmit函數上。 如果您在該事件處理程序中重新提交表單，它將一次又一次地被同一事件處理程序捕獲。
使用.one()函數。 這僅捕獲一次事件。
$(document).ready(function() {
$(".gather").one('submit',function (e) {
e.preventDefault();
var form = this;
$("<img src='loader.gif' alt='Loading...' />").appendTo("#result");
$("result").hide();
setTimeout(function () {
form.submit();
}, 3000); // in milliseconds
});
});
注意：這不使用ajax，只是將表單的提交延遲了3秒鍾。
解決方案3
0 2015-03-18 21:38:28
將提交表單延遲5秒並顯示jQuery對話？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.