Question

我对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
        });
    });

Answer 1

在表单上添加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>

Answer 2

如果您想延迟表单发布，可以使用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秒。

Answer 3

不是答案，只是长篇评论：

以下是获取AJAX基础知识的一些好帖子：

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

在延迟后使用jQuery和显示结果在同一页面上延迟表单输入

3 个答案: