2015-11-07 93 views
0

經過幾個小時的玩這個,它碰到我,我的JQuery根本沒有執行。JQuery提交PHP不執行

我有一個頁面,我試圖提交到PHP腳本而不刷新/離開頁面。如果我使用典型的表單動作/方法/提交,它會插入我的數據庫就好了。但是當我使用JQuery時,JQuery將不會運行。該警報不顯示。 (我是JQuery的新手)。我試圖研究這一點,但沒有任何工作。

這是我的主網頁:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
    $(document).ready(function(e) { 
     $('submitpicks').on('submit','#submitpicks',function(e){ 
      e.preventDefault(); //this will prevent reloading page 
      alert('Form submitted Without Reloading'); 
     }); 
    }); 

</script> 
</head> 

<body> 
<form name="submitpicks" id="submitpicks" action="" method="post"> 
<script language="javascript"> 
var v=0; 
function acceptpick(thepick,removepick){ 
    var userPick = confirm("You picked " + thepick + ". Accept this pick?"); 
    //var theid = "finalpick" + v; 
    var removebtn = "btn" + removepick; 
    //alert(theid); 
    if(userPick==1){ 
     document.getElementById("finalpick").value=removepick; 
     document.getElementById(removebtn).disabled = true; 
     document.getElementById("submitpicks").submit(); 
     v=v+1; 
    } 
} 
</script> 
<?php 
include "Connections/myconn.php"; 
//$setid = $_SESSION["gbsid"]; 
$setid = 11; 
$setqry = "Select * from grabBagParticipants where gbsid = $setid order by rand()"; 
$setresult = mysqli_query($conn, $setqry); 
$u=0; 
if(mysqli_num_rows($setresult)>0){ 
    while($setrow = mysqli_fetch_array($setresult)){ 
     //shuffle($setrow); 
     echo '<input type="button" name="' . $setrow["gbpid"] . '" id="btn' . $setrow["gbpid"] . '" value="' . $u . '" onClick=\'acceptpick("' . $setrow["gbpname"] . '", ' . $setrow["gbpid"] . ');\' /><br />'; 
     $u=$u+1; 
    } 
} 
?> 
<input type="text" name="finalpick" id="finalpick" /> 
<input type="submit" value="Save" /> 
</form> 
<div id="results">&nbsp;</div> 
</body> 
</html> 

這是我的PHP:

<?php 
include "Connections/myconn.php"; 
$theGiver = 1; 
$theReceiver = $_POST['finalpick']; 
$insertsql = "insert into grabBagFinalList(gbflgid, gbflrid) values($theGiver, $theReceiver)"; 
mysqli_query($conn, $insertsql); 
?> 

enter image description here

+0

看看你的控制檯 –

+0

RTM https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById - 你收到警告但沒有檢查它們。 –

+0

我沒有收到控制檯錯誤。 –

回答

1

可以使用e.preventDefault();return false;

<script> 
$(document).ready(function(e) { 
    $('#submitpicks').on('submit',function(e){ 
     e.preventDefault(); 
     $.post('submitpick.php', $(this).serialize(), function(data) { 
      $('#results').html(data); 
     }); 
     // return false; 
    }); 

}); 

</script> 

注意:在你的php中,你不會回顯任何東西來獲取它作爲數據..所以基本的知識,當你試圖使用$ .post或$ .get或$ .ajax ..來檢查js和php之間的連接..所以在PHP

<?php 
    echo 'File connected'; 
?> 

,然後在JS alert(data) ..如果一切正常..進入下一步驟

解釋每一步..

一切之前,你應該檢查安裝的jQuery如果您使用

<script type="text/javascript" src="jquery-1.11.3.min.js"></script> 

從W3Schools的網站..它完全錯誤的..你應該尋找如何安裝jQuery的...然後

月1日提交的形式與JS和防止重裝..並在您的主頁使用<script>

<script> 
    $(document).ready(function(e) { 
     $('#submitpicks').on('submit',function(e){ 
      e.preventDefault(); //this will prevent reloading page 
      alert('Form submitted Without Reloading'); 
     }); 
    }); 
<script> 

輸出:使用表單提交警報無需重新加載...如果這一步是好的,你會得到警告..進入下一步驟

第二個加$。員額到您的代碼

<script> 
     $(document).ready(function(e) { 
      $('#submitpicks').on('submit',function(e){ 
       e.preventDefault(); //this will prevent reloading page 
       $.post('submitpick.php', $(this).serialize(), function(data){ 
        alert(data); 
       }); 
      }); 
     }); 
    <script> 

和submitpick.php >>>確保你mainpage.php和submitpick.php在同一目錄

<?php 
    echo 'File connected'; 
?> 

輸出:與文件警報連接

+0

謝謝,但仍然無法正常工作。 –

+0

@SinTekSolutions看到更新的答案..並閱讀控制檯的錯誤..在你的情況和這段代碼submitpick.php應該是在你的主頁相同的路徑...並評論你所有的PHP代碼,並回應出類似我的東西說.. –

+0

我沒有得到控制檯錯誤。但警報(數據)什麼都不做。 –

0

你有沒有聽說過的AJAX(異步JavaScript和XML)。雖然它可能不是那些對於JQuery和JavaScript新手很容易學習的東西,但它幾乎可以滿足你的需求。好吧,它比這更復雜一點,但基本上AJAX通過使用HTTP請求(很像正常形式)提交信息,但不刷新頁面。

下面是一個指向教程的鏈接:http://www.w3schools.com/ajax/ with vanilla javascript。

下面是一個使用jQuery:http://www.w3schools.com/jquery/jquery_ajax_intro.asp

這裏有一個如何你可以用jQuery設置了一個例子:

$(document).ready(function() { 
    $.ajax({ 
     method: "POST", 
     url: "/something.php" 
     dataType: "JSON", 
     data: {formData:{formfield1: $('formfield1').val(), formfield2: $('formfield2)'.val()}}, 
     success: function(data){ 
      if (data["somevalue"]) == something { 
       dosomething; 
      } else { 
       dosomethingelse 
     }, 
     error: function() { 
      alert("Error message"); 
     } 
    }); 

}); 

這只是一個簡單的例子,現在是什麼這一切的東西意味着什麼。那麼,有幾種方法,其中一些方法是POST和GET,這些方法是HTTP請求方法,您可以使用這些方法做幾件事情。我對這個東西不是專家,但這裏是他們做了什麼:

方法

POST

POST基本工作原理,將信息提交給服務器,然後通常插入該服務器連接到的數據庫。我相信大多數表單都使用POST請求,但不要在此引用我的意思。

GET從服務器,然後取它到數據庫中,並將其發送回客戶端,因此可以執行一個動作另一方面請求數據

GET。例如,無論何時加載頁面,GET請求都會加載頁面的各種元素。這裏需要注意的是,這個請求是專門用於檢索數據的。

還有其他類型的HTTP請求可以使用,例如PUT和DELETE,我認爲這是GET和POST最常見的。無論如何,我建議你看看它們的有用信息。

地址

URL表示到你正在請求的路徑,我不太確定它是如何工作的,使用PHP,我想你只需要調用有問題的PHP頁面,並將其將正常工作,但我不確定,自從我上一學期以來,我沒有使用過PHP,一直在使用Rails,並且它的工作方式不太一樣。總之,可以說你有一些所謂的「Something.php」 PHP頁面,並讓說,somethihng PHP有以下內容:

<?php 
    $form_data = $_POST['data']; 
    $array = json_decode(form_data, true); 
    do something with your data; 
    $jsonToSendBack = "{status: 1}"; 
    $response = json_encode($jsonToSendBack); 
    echo $response; 
?> 

所以基本上是收到文件是一個JSON,這是我們指定的數據類型和在我們完成對服務器中的數據的解釋之後,我們通過回顯echo來發送回應。現在,由於我們的數據類型是JSON,客戶期待JSON的響應,但我們稍後會做到。如果你不熟悉JSON,你應該查看它,但簡單來說,JSON是一種數據交換格式,不同語言可以利用它們將數據傳遞給對方,就像本例中,我通過Javascript向PHP發送數據反之亦然。

數據類型

數據類型基本上,您要發送到服務器的信息類型,則可以通過AJAX指定。您可以發送和接收的數據類型很多,例如,如果您想要,可以將XML或文本發送到服務器,並且依次返回XML或文本,具體取決於您選擇的內容。

成功和錯誤 最後,還有的成功和錯誤參數,基本上如果請求是成功的,它會返回200狀態碼,儘管這並不意味着其他狀態碼並不表明成功過,儘管如此,200可能是您在製作HTTP請求時想看到的。無論如何,成功基本上規定,如果請求成功,它應該執行我寫的函數代碼,否則如果有錯誤,它將在錯誤中執行函數。最後,即使您的請求確實取得了成功,但這並不意味着一切正常,這僅表示客戶端已成功聯繫服務器,並且已收到回覆。請求可能會成功,但通常這並不意味着您的服務器端代碼完美地執行了一切。

無論如何,我希望我的解釋是足夠的,你可以從這裏拿走它。

+0

當然,我希望它適合你。 – Argus