Ajax、jQuery 和 PHP
Ajax, jQuery and PHP
我有一个 jQuery 表格,我创建如下
<div data-role="page" id="page3" data-theme="d" >
<div data-role="header">
<h1 style="font-family: 'Open Sans Condensed', sans-serif;font- size:23px">LetsAllSave</h1>
<div data-role="content">
<form action="passenger.php" data class="ui-body ui-body-a ui-corner-all" method="post" id="passengerfrmsignup" >
<fieldset>
<div data-role="fieldcontain">
<label for="name">
<em>* </em> Name: </label>
<input type="text" id="name" placeholder="Name, at least 5 characters"
name="name" class="required" minlength=5 data-mini="true" onkeyup="this.value=this.value.replace(/[^A-Za-z]/g,'');"/>
</div>
<div data-role="fieldcontain">
<label for="surname">
<em>* </em> Surname: </label>
<input type="text" id="surname" placeholder="Surname, at least 5 characters"
name="surname" class="required" minlength=5 data-mini="true" onkeyup="this.value=this.value.replace(/[^A-Za-z]/g,'');"/>
</div>
<div data-role="fieldcontain">
<label for="phone">
<em>* </em> Phone: </label>
<input type="tel" id="phone" placeholder="phone format: 05xxxxxxxxx"
name="phone" class="required" number=true minlength="11" maxlength="11" data-mini="true"/>
</div>
<div data-role="fieldcontain">
<label for="email">
<em>* </em> Email: </label>
<input type="text" id="email" placeholder="eg. someone@gmail.com"
name="email" class="required email" data-mini="true"/>
</div>
<div data-role="fieldcontain">
<label for="password">
<em>* </em>Password: </label>
<input type="password" id="password" placeholder="At least 5 character password"
name="password" class="required" minlength=5 data-mini="true"/>
</div>
<div id="container"> </div>
<div class="ui-body ui-body-b">
<input type="submit" value="Register"
id="pass-signup" data-theme="d"/>
</div>
</fieldset>
</form>
为了简单起见,我还有如下 passenger.php 文件:
<?php
if (isset($_POST['name'],$_POST['surname'],$_POST['phone'],
$_POST['email'],$_POST['password'])) {
print_r($_POST);
}
else echo "data not set";
?>
注意:我验证了我的表单输入如下:
$( "#passengerfrmsignup" ).validate({
submitHandler: function( form ) {
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
dataType : 'json'
success: function(data) {
console.log(data);
alert("successful");
}
});
return false; // required to block normal submit since you used ajax
}
});
使用 jquery.form-validator.min.js 并且工作正常。但是,在正确填写所有字段并提交表单后 passenger.php 文件 returns "data not set".
可能是什么问题?白白做了很多研究
试试这个代码片段:
foreach($_POST as $key => $value){
if(isset($value)){
return true; // variable is set
}else{
return false; //varible is not set
}
}
将您的 passenger.php 页面更改为:
<?php
if (isset($_POST['name']) && isset($_POST['surname']) && isset($_POST['phone']) &&
isset($_POST['email']) && isset($_POST['password']) && !empty($_POST['name']) && !empty($_POST['surname']) && !empty($_POST['phone']) && !empty($_POST['email']) && !empty($_POST['password'])) {
print_r($_POST);
}
else echo "data not set";
?>
和你的javascript/jQuery
$( "#passengerfrmsignup" ).validate({
submitHandler: function( form ) {
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: $form.serialize()
success: function(data) {
console.log(data);
alert("successful");
}
});
return false; // required to block normal submit since you used ajax
}
});
因为JQuery .serialize() return URL params (name=test&surname=cool
),你需要在你的AJAX请求中指定type: "POST"
。
您还可以使用 $_REQUEST
而不是 $_GET
检查您的参数,以检查您是否能够在服务器端看到您的变量。
我有一个 jQuery 表格,我创建如下
<div data-role="page" id="page3" data-theme="d" >
<div data-role="header">
<h1 style="font-family: 'Open Sans Condensed', sans-serif;font- size:23px">LetsAllSave</h1>
<div data-role="content">
<form action="passenger.php" data class="ui-body ui-body-a ui-corner-all" method="post" id="passengerfrmsignup" >
<fieldset>
<div data-role="fieldcontain">
<label for="name">
<em>* </em> Name: </label>
<input type="text" id="name" placeholder="Name, at least 5 characters"
name="name" class="required" minlength=5 data-mini="true" onkeyup="this.value=this.value.replace(/[^A-Za-z]/g,'');"/>
</div>
<div data-role="fieldcontain">
<label for="surname">
<em>* </em> Surname: </label>
<input type="text" id="surname" placeholder="Surname, at least 5 characters"
name="surname" class="required" minlength=5 data-mini="true" onkeyup="this.value=this.value.replace(/[^A-Za-z]/g,'');"/>
</div>
<div data-role="fieldcontain">
<label for="phone">
<em>* </em> Phone: </label>
<input type="tel" id="phone" placeholder="phone format: 05xxxxxxxxx"
name="phone" class="required" number=true minlength="11" maxlength="11" data-mini="true"/>
</div>
<div data-role="fieldcontain">
<label for="email">
<em>* </em> Email: </label>
<input type="text" id="email" placeholder="eg. someone@gmail.com"
name="email" class="required email" data-mini="true"/>
</div>
<div data-role="fieldcontain">
<label for="password">
<em>* </em>Password: </label>
<input type="password" id="password" placeholder="At least 5 character password"
name="password" class="required" minlength=5 data-mini="true"/>
</div>
<div id="container"> </div>
<div class="ui-body ui-body-b">
<input type="submit" value="Register"
id="pass-signup" data-theme="d"/>
</div>
</fieldset>
</form>
为了简单起见,我还有如下 passenger.php 文件:
<?php
if (isset($_POST['name'],$_POST['surname'],$_POST['phone'],
$_POST['email'],$_POST['password'])) {
print_r($_POST);
}
else echo "data not set";
?>
注意:我验证了我的表单输入如下:
$( "#passengerfrmsignup" ).validate({
submitHandler: function( form ) {
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
dataType : 'json'
success: function(data) {
console.log(data);
alert("successful");
}
});
return false; // required to block normal submit since you used ajax
}
});
使用 jquery.form-validator.min.js 并且工作正常。但是,在正确填写所有字段并提交表单后 passenger.php 文件 returns "data not set".
可能是什么问题?白白做了很多研究
试试这个代码片段:
foreach($_POST as $key => $value){
if(isset($value)){
return true; // variable is set
}else{
return false; //varible is not set
}
}
将您的 passenger.php 页面更改为:
<?php
if (isset($_POST['name']) && isset($_POST['surname']) && isset($_POST['phone']) &&
isset($_POST['email']) && isset($_POST['password']) && !empty($_POST['name']) && !empty($_POST['surname']) && !empty($_POST['phone']) && !empty($_POST['email']) && !empty($_POST['password'])) {
print_r($_POST);
}
else echo "data not set";
?>
和你的javascript/jQuery
$( "#passengerfrmsignup" ).validate({
submitHandler: function( form ) {
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: $form.serialize()
success: function(data) {
console.log(data);
alert("successful");
}
});
return false; // required to block normal submit since you used ajax
}
});
因为JQuery .serialize() return URL params (name=test&surname=cool
),你需要在你的AJAX请求中指定type: "POST"
。
您还可以使用 $_REQUEST
而不是 $_GET
检查您的参数,以检查您是否能够在服务器端看到您的变量。