[英]jQuery Post and Get Form data
提交表單后,我可以使用$ _POST獲得其字段值。 但是,我試圖使用基本的jQuery(不帶任何插件)來檢查任何字段是否為空白,我只想在沒有任何空白字段的情況下發布表單內容。
我正在嘗試遵循代碼,並且使用jQuery成功,但是唯一的問題是在使用jQuery檢查后無法發布表單。 jQuery之后不會到達$ _POST。
另外,如何獲取jQuery中的服務器響應(以檢查是否有服務器錯誤)。 這是我正在嘗試的:
HTML:
<form action="" id="basicform" method="post">
<p><label>Name</label><input type="text" name="name" /></p>
<p><label>Email</label><input type="text" name="email" /></p>
<input type="submit" name="submit" value="Submit"/>
</form>
jQuery的:
jQuery('form#basicform').submit(function() {
//code
var hasError = false;
if(!hasError) {
var formInput = jQuery(this).serialize();
jQuery.post(jQuery(this).attr('action'),formInput, function(data){
//this does not post data
jQuery('form#basicform').slideUp("fast", function() {
//how to check if there was no server error.
});
});
}
return false;
});
PHP:
if(isset($_POST['submit'])){
$name = trim($_POST['name'];
$email = trim($_POST['email'];
//no any error
return true;
}
有兩種方法可以做到這一點
方法1:
根據您的實現,您正在使用input[type="submit"]
它的默認行為是提交表單。 因此,如果要在提交表單之前進行驗證,則必須preventDefault()
的行為
jQuery('form#basicform').submit(function(e) {
//code
e.preventDefault();
var hasError = false;
if(!hasError) {
var formInput = jQuery(this).serialize();
jQuery.post(jQuery(this).attr('action'),formInput, function(data){
//this does not post data
jQuery('form#basicform').slideUp("fast", function() {
//how to check if there was no server error.
});
});
}
$(this).submit();
return false;
});
方式2:
或者只需將您的提交按鈕替換為簡單按鈕,然后手動提交表單。 使用$("yourFormSelector").submit();
將您的提交按鈕更改為簡單按鈕
即改變
<input type="submit" name="submit" value="Submit"/>
至
<input id="frmSubmit" type="button" name="submit" value="Submit"/>
而且您的jQuery代碼將是
jQuery('input#frmSubmit').on('click',function(e) {
//code
var hasError = false;
if(!hasError) {
var formInput = jQuery(this).serialize();
jQuery.post(jQuery(this).attr('action'),formInput, function(data){
//this does not post data
jQuery('form#basicform').slideUp("fast", function() {
//how to check if there was no server error.
});
});
}
$("form#basicform").submit();
return false;
});
要從服務器獲取響應,您必須echo
您的響應。
假設,如果所有變量都已設置,則echo 1;
否則, echo 1;
否則echo 0
。
if(isset($_POST['submit'])){
$name = trim($_POST['name'];
$email = trim($_POST['email'];
echo 1;
} else {
echo 0;
}
在$.post()
成功回調函數中,它像
jQuery.post(jQuery(this).attr('action'),formInput, function(data){
//this does not post data
jQuery('form#basicform').slideUp("fast",{err:data}, function(e) {
if(e.data.err==1){
alert("no error");
} else {
alert("error are there");
});
});
您可以從服務器返回類似{"error": "1"}
或{"error": "0"}
的內容(這意味着將更易讀的內容放入JSON響應中)。 因為您有data
這使檢查變得容易。
PHP:
if(isset($_POST['submit'])){
$name = trim($_POST['name'];
$email = trim($_POST['email'];
//no any error
return json_encode(array("error" => 0));
} else {
return json_encode(array("error" => 1));
}
JavaScript:
jQuery('input#frmSubmit').submit(function(e) {
//code
var hasError = false;
if(!hasError) {
var formInput = jQuery(this).serialize();
jQuery.post(jQuery(this).attr('action'),formInput, function(data){
var myData = data;
if(myDate.error == 1) {//or "1"
//do something here
} else {
//do something else here when error = 0
}
});
}
$("form#basicform").submit();
return false;
});
具體而言:
我如何才能在jQuery中獲取服務器響應(以檢查是否有服務器錯誤)。 這是我正在嘗試的:
聽起來您正在談論通過jQuery-Ajax進行服務器端驗證。
好吧,那么您需要:
所以你說
但是,我試圖使用基本的jQuery(不帶任何插件)來檢查任何字段是否為空白,我只想在沒有任何空白字段的情況下發布表單內容。
JavaScript / jQuery代碼:
看一下這個例子:
<script>
$(function()) {
$("#submit").click(function() {
$.post('your_php_script.php', {
//JS Var //These are is going to be pushed into $_POST
"name" : $("#your_name_field").val(),
"email" : $("#your_email_f").val()
}, function(respond) {
try {
//If this falls, then respond isn't JSON
var result = JSON.parse(respond);
if ( result.success ) { alert('No errors. OK') }
} catch(e) {
//So we got simple plain text (or even HTML) from server
//This will be your error "message"
$("#some_div").html(respond);
}
});
});
}
</script>
好吧,不是時候看一下PHP了:
<?php
/**
* Since you're talking about error handling
* we would keep error messages in some array
*/
$errors = array();
function add_error($msg){
//@another readers
//s, please don't tell me that "global" keyword makes code hard to maintain
global $errors;
array_push($errors, $msg);
}
/**
* Show errors if we have any
*
*/
function show_errs(){
global $errors;
if ( !empty($errors) ){
foreach($errors as $error){
print "<p><li>{$error}</li></p>";
}
//indicate that we do have some errors:
return false;
}
//indicate somehow that we don't have errors
return true;
}
function validate_name($name){
if ( empty($name) ){
add_error('Name is empty');
}
//And so on... you can also check the length, regex and so on
return true;
}
//Now we are going to send back to JavaScript via JSON
if ( show_errs() ){
//means no error occured
$respond = array();
$respond['success'] = true;
//Now it's going to evaluate as valid JSON object in javaScript
die( json_encode($respond) );
} //otherwise some errors will be displayed (as html)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.