澄清如何使jquery, ajax和php交互,以实现表单提交和其他控件


Clarifications on how to make interact jquery, ajax and php in order to realize a form submission and other controls

所以,正如标题所说,我需要澄清一下如何使jquery, ajax和php交互,以实现表单提交和其他控件。

这是我第一次将jquery, ajax和php一起使用的web体验,当然,我面临一些问题。

我描述我要做什么。

基本上,我有一个带有注册表单的索引页:

<form id="formRegistration" action="registration_success.php" method="post">
    <p id="ptxtFullName">
        <input id="txtFullName" name="txtFullName" class="textbox" placeholder="Insert you full name" type="text" />
    </p>
    <p id="pTxtEmail">
       <input id="txtEmail" name="txtEmail" class="textbox" placeholder="Insert an email" type="text" />
    </p>
    <p id="pTxtPassword">
    <input id="txtPassword" name="txtPassword" class="textbox" placeholder="Choose a password" type="password" />
    </p>
    <p id="pTxtPasswordConfirmation">
    <input id="txtPasswordConfirmation" name="txtPasswordConfirmation" class="textbox" placeholder="Confirm your password" type="password" />
    </p>
    <p id="pBtnRegistration">
    <input id="btnRegistration" type="submit" value="Register!" />
    </p>
</form>

然后,我有一个jquery文件,它执行所有输入验证的事情(输入正确或不正确时的一些效果,以及类似的事情),并且,如果验证进行得很好,则进行ajax调用。这只是一个例子,我没有发布整个文件,因为它太大了:

jQuery(document).ready(function($) {
$(function() {
            var $fullName = $("input[name='txtFullName']");
            var $email = $("input[name='txtEmail']");
            var $password = $("input[name='txtPassword']");
            var $passwordConfirmation = $("input[name='txtPasswordConfirmation']");
    $("#btnRegistration").click(function() {
        //Validation controls and effects.
    });
    return true;
    });
    $.ajax({
            type : "POST",
            url : "process_registration.php",
            data : "fullName", "email", "password",
            dataType : "HTML",
            success : function() {
                alert("Ok");
            },
            error : function() {
                alert("Error");
            }
        });
});

注意,jquery文件,当我添加ajax调用,它停止工作,而如果我不添加ajax调用,它工作完美。

然后,这里是我的php文件,名为process_registration.php,它应该控制电子邮件是否已经在使用中,然后,将验证的输入数据插入MySQL数据库:

<?php

需要"db_connection.php";

$fullName = isset($_POST["fullName"]);
$email = isset($_POST["email"]);
$password = isset($_POST['password']);
$sql = mysql_query("SELECT * FROM utente WHERE mail = '$email'") or die("Email already in use");
$num_rows = mysql_num_rows($sql);
if ($num_rows == 0) 
{
    $password_md5 = md5($password);
    mysql_query("INSERT INTO user (Full_Name , Email, Password) VALUES
               ('$fullName', '$email', '$password_md5')") OR DIE(mysql_error());
}

这一切。

显然它不工作。

也许我在这件事上采取了完全错误的方法?

提前感谢您的好意和您的回答。

试试:

jQuery(document).ready(function($) {
    $('#formRegistration').submit(function() {
        e.preventDefault();
        // Perform form validation here and return from this function
        // if you do not want to submit the form.
        $.ajax({
            type : "POST",
            url : "process_registration.php",
            data : $(this).serialize(),
            dataType : 'html',
            success : function() {
                alert("Ok");
            },
            error : function() {
               alert("Error");
            }
        });
    });
});

注册一个事件处理程序,该事件处理程序将在提交表单时被调用。对e.preventDefault()的调用阻止了常规的表单提交。然后处理程序通过ajax发送表单。

你必须改变输入元素的名称,因为他们需要匹配你的PHP代码正在寻找的名称(例如,将"txtFullName"更改为"fullName")。

ajax调用中的data属性应该是一个对象。

data : {
    "fullName" : fullName,
    "email" : email
}