所以,正如标题所说,我需要澄清一下如何使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
}