使用jQuery延迟表单输入并在延迟后在同一页面上显示结果
[英]Delay Form Input With jQuery And Display Results On Same Page After Delay
问题描述
I am totally new to AJAX so I don't even know where to start. 
我是AJAX的新手，所以我什至不知道从哪里开始。 I've tried delaying the submission of the form with jQuery but then the script doesn't even recieve the POST request. 我尝试过使用jQuery延迟提交表单，但是该脚本甚至没有收到POST请求。
My index.php 我的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>
For this to work ideally I'd need the form submission to be delayed by about 3 seconds, and the data from the $result variable viewable within the <div id="result"></div> element. 为了使此方法理想地工作，我需要将表单提交延迟大约3秒钟，并且$result变量中的数据可以在<div id="result"></div>元素中<div id="result"></div> 。 I've been searching for hours on how I could do this and I just cannot seem to find an answer. 我一直在寻找有关如何执行此操作的时间，但似乎找不到答案。 Could someone show me an example or steer me in the right direction? 有人可以给我看个例子还是指导我正确的方向？
EDIT: 编辑：
This seems to inch towards what I want to do but the form is not functioning after the delay. 这似乎有点接近我想做的事，但是延迟后表格无法正常工作。
$(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
Put an id on your form 在表单上输入一个ID
<form action="index.php" id="myForm" method="POST" class="gather">
<input type="submit" name="mine" value="Mine" id="ajax_bt"/>
</form>
And in your javascript use set timeout 并在您的JavaScript中使用set timeout
<script>
$('#myform').submit(function(ev){
ev.preventDefault();
setTimeout(function(){
$('#myform').submit();
},3000);
});
</script>
解决方案2
0 已采纳 2015-03-18 21:17:31
If you want to delay the form post you can use the setTimeout() javascript function. 如果要延迟表单发布，可以使用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);
});
This will wait 3 seconds and then preform an ajax call that submits the form to your page. 这将等待3秒钟，然后执行ajax调用，将表单提交到您的页面。
You should also add a hidden input so it get posted to your page, as the submit button won't be included in $.serialize() : 您还应该添加一个隐藏的输入，以便将其发布到您的页面上，因为$.serialize()不会包含“提交”按钮：
<input type="hidden" name="mine" value="1" />
UPDATE: 更新：
Looking at your additional js code, I see the issue is with your onSubmit function. 查看您的其他js代码，我发现问题出在您的onSubmit函数上。 If you resubmit the form within that event handler, it will get caught again in the same event handler, over and over. 如果您在该事件处理程序中重新提交表单，它将一次又一次地被同一事件处理程序捕获。
Use the .one() function. 使用.one()函数。 This only captures the event once. 这仅捕获一次事件。
$(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
});
});
Note: This doesn't use ajax, it simply delays the submission of the form for 3 secs. 注意：这不使用ajax，只是将表单的提交延迟了3秒钟。
解决方案3
0 2015-03-18 21:38:28
Not an answer, just a long comment: 没有答案，只是一个很长的评论：
Here are some good posts for getting the basics of AJAX: 这是一些获取AJAX基础知识的好帖子：
More complicated example 更复杂的例子
Populate dropdown 2 based on selection in dropdown 1 根据下拉列表1中的选择填充下拉列表2
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.