0

在过去的两天里，我一直在尝试使用 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代码如下（jquery脚本和html代码在同一个文件）：

<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);

?>

每当我单击注册按钮时，什么都没有发生。该页面仅刷新回登录表单，因为它具有类“活动”作为默认表单，并且浏览器地址栏从这个 url：“localhost/slider.html”更改为这个 url：“localhost/slider.html？” .

我希望我的问题足够明确，因为我需要一个紧急的答案，因为这是我的论文项目，我已经没有选择了。

4

2 回答 2

3

并且浏览器地址栏从这个 url：“localhost/slider.html”变为这个 url：>“localhost/slider.html？”。

利用e.preventDefault();

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

然后加，

`e.preventDefault();

检查 javascript 控制台，您将看到所有错误。你必须一一消除。首先，检查上面。

建议：当您复制/粘贴代码时，至少尝试了解结构。有时它会与您的代码冲突，并可能停止运行您的代码。

于 2012-11-13T06:58:43.850 回答
0

看起来您的 Javascript 有一些错误，因此没有执行。因此，表单提交诉诸其默认行为——即提交到标签的动作属性。由于您没有在标签中指定 action 属性，它会将参数发布到当前页面。

您正在获取 url localhost/slider.html？因为两个原因：

  1. 您尚未在 . 因此，表单正在尝试以 GET 形式提交。这就是为什么附加的“？”
  2. 您没有输入的名称。因此，查询字符串为空。您需要为每个输入指定名称属性。

你首先要做的是调试你的Javascript。使用 Firefox 中的 Firebug 或 Chrome 中的控制台或任何类似工具来捕获您的 JS 错误并检查您的 Ajax 请求和响应。

另外，请确保“click”函数中的最后一条语句是：

   return false;

强制表单停留在页面上。

正如@steve 指出的那样，另一件重要的事情是向您的标签添加方法和操作属性。这将确保您的脚本不会在禁用 JS 的浏览器或任何此类情况下完全失败。

于 2012-11-13T07:07:21.910 回答