2012-11-13 49 views
0

我一直有問題,試圖提交一個使用jquery ajax,php到mysql數據庫的表單。我重複使用了一個我在網上找到的動畫形式的代碼。 HTML代碼如下所示(文件名: 「Slider.html」):Submtting使用jquery ajax和php的mysql數據庫的動畫形式

<html> 
<body> 
<div id="form_wrapper" class="form_wrapper"> 
     <form class="register" style="right:-500px;backgroundcolor:grey;"> 
      <h3>Register</h3> 
      <div class="column"> 
       <div> 
        <label>First Name:</label> 
        <input type="text" /> 
        <span class="error">This is an error</span> 
       </div> 
       <div> 
        <label>Last Name:</label> 
        <input type="text" /> 
        <span class="error">This is an error</span> 
       </div> 
      </div> 
      <div class="column"> 
       <div> 
        <label>Username:</label> 
        <input type="text"/> 
        <span class="error">This is an error</span> 
       </div> 
       <div> 
        <label>Email:</label> 
        <input type="text" /> 
        <span class="error">This is an error</span> 
       </div> 
       <div> 
        <label>Password:</label> 
        <input type="password" id="r_passwordField"/> 
        <span class="error">This is an error</span> 
       </div> 
      </div> 
      <div class="bottom"> 
       <div class="remember"> 
        <input type="checkbox" /> 
        <span>Send me updates</span> 
        </div> 
        <input type="submit" id="registrationform" value="register"/> 
        <a href="index.html" rel="login" class="linkform">You have an account already? Log in 

here</a> 
        <div class="clear"></div> 
       </div>  
     </form> 


     <form class="login active"> 
      <h3>Login</h3> 
      <div> 
       <label>Username:</label> 
       <input type="text" /> 
       <span class="error">This is an error</span> 
      </div> 
      <div> 
       <label>Password: <a href="forgot_password.html" rel="forgot_password" class="forgot 

linkform">Forgot your password?</a></label> 
       <input type="password" id="l_passwordField" size="10"/> 
       <span class="error">This is an error </span> 
      </div> 
      <div class="bottom"> 
       <div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div> 
       <input type="submit" id="loginform" value="Login"></input> 
       <a href="register.html" rel="register" class="linkform">You don't have an account yet? 

Register here</a> 
       <div class="clear"></div> 
      </div> 
     </form>  <form class="forgot_password"> 
      <h3>Forgot Password</h3> 
       <div> 
        <label>Username or Email:</label> 
        <input type="text" /> 
        <span class="error">This is an error</span> 
       </div> 
       <div class="bottom"> 
        <input type="submit" id="forgortform" value="Send reminder"></input> 
        <a href="index.html" rel="login" class="linkform">Suddenly remebered? Log in here</a> 
        <a href="register.html" rel="register" class="linkform">You don't have an account? 

Register here</a> 
        <div class="clear"></div> 
       </div> 
     </form> 

</div> 


    <div id="graph-wrapper" class="graph-container" style="display:none"> 
     <h3>Standard Diviation Bell Curve<h3> 
     <div class="graph-info"> 
        <a href="javascript:void(0)" class="visitors">Visitor</a> 
      <a href="#" id="lines" class="active"><span></span></a> 
     </div> 

     <div class="graph-container"> 
       <div id="graph-lines"></div> 
      <div id="graph-bars"></div> 
     </div> 
    </div> 
</div> 
</body> 
</html> 

jQuery的Ajax代碼如下(在同一個文件的HTML代碼jQuery腳本):

<script> 
    $(document).ready(function(){ 

           //animated code and other codes omitted 
      ("#registrationform").click(function(){ 
        $.post("postdata.php", 
    {fname:"Ibrahim",lname:"Ahmadu",email:"[email protected]",uid:"ibro2stay",pwd:"ibro2stay",mean:"0.1",varience:"0.1",sdev:"0. 

    1",duration:"0.1"},function(responce){ 

         if(responce==0){ 
           alert("There was an error updating the record"); 

          }else{ 
           alert("update successful"); 

           }  
          }); 
      }); 
      }); 
</script> 

下面是PHP代碼(PHP代碼的文件名: 「postdata.php」):

<?php 
$fname=$_REQUEST["fname"]; 
$lname=$_REQUEST["lname"]; 
$email=$_REQUEST["email"]; 
$uid=$_REQUEST["uid"]; 
$pwd=$_REQUEST["pwd"]; 
$mean=$_REQUEST["mean"]; 
$varience=$_REQUEST["varience"]; 
$sdev=$_REQUEST["sdev"]; 
$duration=$_REQUEST["duration"]; 

$con=mysql_connect('localhost','root',''); 
if(!$con) 
{ 
    die("Error Connecting to database;"+mysql_error()); 
} 


$database=mysql_select_db('mydb'); 
if(!$database) 
{ 

    die("Error Connecting to database;"+mysql_error()); 
} 


$update = mysql_query("insert into users values('$fname','$lname','$email','$uid','$pwd','$mean','$varience','$sdev','$duration')"); 

if(!$update) 
{ 
    die("Update wasn't Success full"+mysql_error()); 
} 

echo "update successfull"; 

mysql_close($con); 

?> 

每當我點擊註冊按鈕沒有任何反應。該頁面僅刷新回登錄表單,因爲它具有默認表單的「活動」類,並且瀏覽器地址欄從該URL:「localhost/slider.html」更改爲以下URL:「localhost/slider.html?」 。

我希望我的問題足夠明確,因爲我需要一個緊急答案,因爲這是我的論文項目,而且我的選擇不多。

回答

3

並且瀏覽器地址欄從此URL更改爲「localhost/slider.html」到此URL:>「localhost/slider.html?」。

使用e.preventDefault();

$("#registrationform").click(function(e){ 
^ 
| 
|_______________ you forgot the $ 

再加入,

`e.preventDefault(); 

檢查JavaScript控制檯,你會看到所有的錯誤。你必須逐個消除。首先,請檢查上面的內容。

建議當你複製/粘貼代碼時,至少試着去知道結構。有時它會與你的代碼衝突,並可能停止運行你的代碼。

+0

非常感謝您的及時響應,無論如何我早就明白這一點,但感謝提示.....這聽起來可能很有趣,但我直接在記事本上編碼....你有鏈接到任何可靠的在線js代碼debuger? – user28864

+0

你不需要一個。只需檢查默認包含在任何現代brwoser中的javacript控制檯,或作爲擴展。 Chrome已內置,FireFox有螢火蟲,歌劇有DragonFly ....等 – itachi

+0

感謝您的頭....乾杯 – user28864

0

看起來像你的Javascript有一些錯誤,因此不執行。因此,表單提交的是其默認行爲 - 即提交給標記的action屬性。由於您沒有在標籤中指定動作屬性,它會將參數發佈到當前頁面。

您正在查看url localhost/slider.html?由於兩個原因:

  1. 您還沒有在您的程序中指定method =「post」。所以,表單試圖提交爲GET。這就是爲什麼附加的「?」
  2. 您沒有輸入的名稱。所以,查詢字符串是空的。您需要爲每個輸入指定名稱屬性。

你要做的第一件事就是調試你的Javascript。在Firefox中使用Firebug或在Chrome或其他類似工具中使用Firebug來捕捉您的JS錯誤,並檢查您的Ajax請求和響應。

同時,確保在「點擊」功能的最後一個語句是:

return false; 

以強制的形式留在頁面上。

另一個重要的事情是,正如@steve指出的那樣,將方法和動作屬性添加到您的標記中。這將確保您的腳本不會完全在JS禁用的瀏覽器上或任何此類情況下發生故障。

相關問題