jQuery，AJAX，PHP數據交換問題

我嘗試將輸入字段中的值與jquery.ajax函數一起發佈到php文件中。 PHP部分必須將數據插入到mysql數據庫中，生成一個唯一的pincode並將json的pincode返回給jquery代碼。jQuery，AJAX，PHP數據交換問題

但提交表單沒有任何反應，當...

當我直接到瀏覽器中的main.php文件，它告訴我一個獨特的PIN碼和PHP腳本，甚至插入數據庫中的pin碼。所以我認爲JSON部分出了問題，但我不明白爲什麼。

我希望有人能告訴我我做錯了什麼。任何幫助將是太棒了！

下面的代碼是工作代碼！

HTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>AJAX PHP JSON Test</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("form#userForm").submit(function() { 
       var inputFname = $('#inputFname').attr('value'); 
       var inputLname = $('#inputLname').attr('value'); 
       $.ajax({ 
        type: "POST", 
        url: "main.php", 
        data: {inputFname: inputFname,inputLname: inputLname}, 
        dataType: "json", 
        contentType:"application/json; charset=utf-8", 
        success: function(data) { 
         $("p.succesText").html(data.jsCode); 
         $("form#userForm").hide(); 
         $("div.success").fadeIn(); 
        }, 
        error: function(xhr, status, error) { 
         $("form#userForm").hide(); 
         $("p.errorHead").html("Something went wrong."); 
         $("p.errorText").text("ResponseText: " + xhr.responseText 
              + "Statuscode: " + xhr.status 
              + "ReadyState: " + xhr.readyState); 
         $("div.error").fadeIn(); 
        } 
       }); 
       return false; 
      }); 
     });  
    </script> 
</head> 
<body> 
    <div class="MiddleWhite"> 
     <form id="userForm" method="post" name="userForm" action=""> 
     <label for="inputFname" class="LabelForInput"> 
      Enter your Forename 
     </label> 
     <input type="text" name="inputFname" id="inputFname" class="TextInput" 
      size="20" /> 
     <br /> 
     <br /> 
     <label for="inputLname" class="LabelForInput"> 
      Enter your Surname 
     </label> 
     <input type="text" name="inputLname" id="inputLname" class="TextInput" 
      size="20" /> 
     <br /> 
     <br /> 
     <br /> 
     <button type="submit" class="Button"> 
      Generate code</button> 
     </form> 
     <div class="success" style="display: none;"> 
      <p class="succesText"> 
      </p> 
      <p class="checkCallText"> 
      </p> 
     </div> 
     <div class="error" style="display: none;"> 
      <p class="errorHead"> 
      </p> 
      <p class="errorText"> 
      </p> 
     </div> 
    </div> 
</body> 
</html>

PHP部分：

<?php header('content-type: application/json; charset=utf-8'); 

    $log = array(); 


     $varFname = htmlspecialchars($_POST["inputFname"]); 
     $varLname = htmlspecialchars($_POST["inputLname"]); 

     //Make Database connection 
     $db = mysql_connect("192.168.178.254","root","852456"); 
     if(!$db) die("Error connecting to MySQL database."); 
     mysql_select_db("Ajax" ,$db); 

     //Generate code and check if code already exists in the database 
     do 
     { 
      $varCode = rand(10000, 99999); 
      $dbCheckCode = ""; 
      $dbCheckCode = mysql_query("SELECT * FROM TableAjax WHERE code='$varCode'"); 
     } 
     while (mysql_fetch_array($dbCheckCode) !== false); 

     //Save the Form data in the database 
     $sql = "INSERT INTO TableRecordcall (fname, lname, code) VALUES (".PrepSQL($varFname) . ", " .PrepSQL($varLname) . ", " .PrepSQL($varCode) . ")"; 
     mysql_query($sql); 

     //Return code to frontend 
     $log['jsCode'] = $varCode; 

     echo json_encode($log); 


    //Clean SQL statement 
    function PrepSQL($value) 
    { 
     if(get_magic_quotes_gpc()) 
     { 
      $value = stripslashes($value); 
     } 
     $value = "'" . mysql_real_escape_string($value) . "'"; 
     return($value); 
    } 

?>

來源

2012-05-10 Rick van den Bovenkamp

而且您沒有使用

return false;

在峯會回調，以防止默認表單提交。改變這樣的

$(document).ready(function() { 
      $("form#submit").submit(function() { 
       var inputFname = $('#inputFname').attr('value'); 
       var inputLname = $('#inputLname').attr('value'); 
       $.ajax({ 
        type: "POST", 
        url: "main.php", 
        data: {inputFname: inputFname,inputLname: inputLname}, 
        dataType: "json", 
        contentType:"application/json; charset=utf-8", 
        success: function(data) { 
         $("p.succesText").html(data.jsCode); 
         $("form#submit").hide(); 
         $("div.success").fadeIn(); 
        }, 
        error: function(xhr, status, error) { 
         $("form#submit").hide(); 
         $("p.errorHead").html("Something went wrong."); 
         $("p.errorText").text("ResponseText: " + xhr.responseText 
              + "Statuscode: " + xhr.status 
              + "ReadyState: " + xhr.readyState); 
         $("div.error").fadeIn(); 
        } 
       }); 
       return false; 
      }); 
     });

來源

2012-05-10 12:12:18

嗨，快樂，返回虛假陳述的作品！感謝您的回答！順便說一句，我認爲單引號是用於文本和沒有引號來調用變量？ –

在對象的鍵中，您可以使用引號或使用引號。但使用引號更好，因爲不存在關鍵字衝突的可能性。但是沒有引用版本是比較常用的。 :) –

在$就更換

data: {'inputFname': inputFname,'inputLname': inputLname},

通過

data: {inputFname: inputFname,inputLname: inputLname},

希望它有幫助。

來源

2012-05-10 12:08:29

嗨努諾·科斯塔你的js代碼，我認爲單引號被用於文本和不帶引號打電話給一個變量？ –

冒號前沒有單引號，冒號後只有單引號（如果沒有變量）。 –

從jQuery API here

形式及其子元素不應該使用輸入名稱或ID與形式的屬性衝突，如提交，長度，或方法。名稱衝突可能導致令人困惑的失敗。有關規則的完整列表並檢查標記是否存在這些問題，請參閱DOMLint。

你寫

<form id="submit" method="post" name="submit" action="">

試圖改變形式的ID /名稱。

來源

2012-05-10 12:11:06 maxdec

更改了userForm中的ID /名稱，但不幸的是沒有結果。 –

變化<button type="submit" class="Button">到<input type="submit" class="Button" />

來源

2012-05-10 12:12:51

試過但沒有結果 –

jQuery，AJAX，PHP數據交換問題

回答

相關問題