1. 首頁
  2. 問答
  3. 延遲形式輸入與jQuery和顯示結果在同一頁上延遲

延遲形式輸入與jQuery和顯示結果在同一頁上延遲

2015-03-18 78 views
0

我完全是新的AJAX，所以我甚至不知道從哪裏開始。我試過用jQuery延遲提交表單，但是這個腳本甚至沒有收到POST請求。延遲形式輸入與jQuery和顯示結果在同一頁上延遲

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

來源

2015-03-18 Cory A

回答

0

如果您想延遲表單發佈，您可以使用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" />

UPDATE：

看着你額外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秒。

來源

2015-03-18 21:17:31 phixr

+0

當我做了'$ result'變量仍然不確定。 – 2015-03-18 21:28:10

+0

它仍然返回一個空變量。 – 2015-03-18 21:38:00

+0

看起來像'$ .serialize（）'不包含提交按鈕值。您可能想添加一個隱藏的輸入字段：''。 – phixr 2015-03-18 21:41:04

1

把一個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>

來源

2015-03-18 21:24:21 Severian

相關問題

 相關問題