使用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>
元素中查看。我已经找了好几个小时,想知道该怎么做,但似乎找不到答案。有人能给我举个例子,或者引导我朝着正确的方向前进吗?
编辑:
这似乎朝着我想做的事情迈进了一步,但在延迟之后,表格就无法正常工作了。
$(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
});
});
在表单上输入一个id
<form action="index.php" id="myForm" method="POST" class="gather">
<input type="submit" name="mine" value="Mine" id="ajax_bt"/>
</form>
并且在您的javascript中使用设置超时
<script>
$('#myform').submit(function(ev){
ev.preventDefault();
setTimeout(function(){
$('#myform').submit();
},3000);
});
</script>
如果您想延迟表单发布,可以使用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秒。
不是答案,只是一个长评论:
以下是一些获得AJAX基础知识的好帖子:
的一个简单例子
更复杂的示例
根据下拉列表1中的选择填充下拉列表2
相关文章:
- 如何获取不属于我项目的上一页的URL
- 如何在Facebook上的iframe应用程序中使后退按钮返回到上一页
- 使用Booklet Jquery插件,我如何验证最后一页是否显示
- 如何在一页网站中使用PHP重定向到一个页面
- Javascript并不是显示在每一页上
- 如何在一页上显示多个Highcharts图表
- jQuery分页下一页和上一页按钮在点击零或超过最后一页后失败
- 如何为AngularJS制作智能表中第一页和最后一页的跳过按钮
- Bootstrap一页导航Fluid网站最小化问题
- 返回上一页时,Javascript仍处于活动状态
- 将jsp重定向到servlet,然后重定向到下一页
- 如何在重定向到asp.net中单击按钮的下一页之前应用javascript警报
- 传递表单值并移动到另一页
- 如何获取数组详细信息另一页
- 警报中的window.location必须重定向到上一页
- 一页签出在Magento版本1.7.0.2中不起作用
- 获取/保留上一页's具有SmoothState的URL
- 简单的一页水平滚动
- 在新表单上使用JavaScript创建多个共享点项目,但将下一页加载延迟到全部创建
- 如何设置动画在加载下一页之前完成的延迟?[jQuery,引导程序]