使用 jquery ajax 和 php 向 mysql 数据库提交动画表单答案

【问题标题】：Submtting An animated form using jquery ajax and php to mysql database使用 jquery ajax 和 php 向 mysql 数据库提交动画表单
【发布时间】：2012-11-13 06:47:25
【问题描述】：

过去两天我一直在尝试使用 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？” .

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

【问题讨论】：

标签： php jquery mysql ajax

【解决方案1】：

浏览器地址栏从这个url：“localhost/slider.html”变成了这个url：>“localhost/slider.html?”。

使用e.preventDefault();

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

然后添加，

`e.preventDefault();

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

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

【讨论】：

非常感谢您的及时回复，无论如何我之前确实知道了这一点，但感谢您的提示.....这对您来说可能听起来很有趣，但我直接在记事本上编码。 ...您有任何可靠的在线 js 代码调试器的链接吗？
你不需要。只需检查默认情况下或作为扩展包含在任何现代浏览器中的 javacript 控制台。 Chrome 有内置，FireFox 有 firebug，Opera 有 DragonFly.... 等等

【解决方案2】：

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

你得到了 localhost/slider.html? 的 URL 有两个原因：

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

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

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

   return false;

强制表单停留在页面上。

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

【讨论】：