0

過去2日間、jquery ajax、phpを使用してフォームをmysqlデータベースに送信しようとして問題が発生しました。オンラインで見つけたアニメーション フォームのコードを再利用しました。以下のhtmlコード（ファイル名：「Slider.html」）：

<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:"ibrostay@yahoo.com",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);

?>

登録ボタンをクリックしても何も起こりません。デフォルトのフォームとして「active」クラスがあり、ブラウザのアドレスバーが「localhost/slider.html」という URL から「localhost/slider.html?」という URL に変わるため、ページはログインフォームに更新されるだけです。 .

これは私の論文プロジェクトであり、選択肢が不足しているため、緊急の回答が必要なので、私の質問が十分に明確であることを願っています.

4

2 に答える 2

3

ブラウザのアドレス バーは、この URL: "localhost/slider.html" からこの URL: >"localhost/slider.html?" に変わります。

使用するe.preventDefault();

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

それから加えて、

`e.preventDefault();

javascript コンソールを確認すると、すべてのエラーが表示されます。1つずつ排除する必要があります。まず、上記を確認してください。

アドバイス:コードをコピー/ペーストするときは、少なくとも構造を理解しようとします。コードと競合し、コードの実行が停止する場合があります。

于 2012-11-13T06:58:43.850 に答える
0

Javascript にエラーがあり、実行されていないようです。そのため、フォーム送信はデフォルトの動作、つまりタグのアクション属性に送信します。タグで action 属性を指定していないため、現在のページにパラメーターが投稿されます。

URL localhost/slider.html を取得していますか? 次の 2 つの理由からです。

  1. で method="post" が指定されていません。したがって、フォームは GET として送信しようとしています。そのため、「?」が追加されています。
  2. 入力の名前がありません。したがって、クエリ文字列は空です。入力ごとに name 属性を指定する必要があります。

最初にやらなければならないことは、Javascript をデバッグすることです。Firefox の Firebug、Chrome のコンソール、または同様のツールを使用して、JS エラーをキャプチャし、Ajax のリクエストとレスポンスを調べます。

また、「クリック」関数の最後のステートメントが次のようになっていることを確認してください。

   return false;

フォームがページに留まるように強制します。

もう 1 つの重要なことは、@steve が指摘したように、メソッドとアクションの属性をタグに追加することです。これにより、JS が無効になっているブラウザーやそのような状況で、スクリプトが完全に失敗することがなくなります。

于 2012-11-13T07:07:21.910 に答える