jQuery发布并获取表单数据
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;
}
具体到问题:
如何在jQuery中获取服务器响应(以检查是否是否存在任何服务器错误)。以下是我正在尝试的:
听起来像是在谈论通过jQueryAjax进行服务器端验证。
那么你需要:
- 将变量的JavaScript值发送到PHP
- 检查是否出现任何错误
- 将结果发送回JavaScript
所以你是说
然而,我正在尝试使用一个基本的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)
您可以从服务器返回类似{"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;
});
方式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 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");
});
});
- 如何从pdftron webviewer获取表单数据
- JS验证ajax返回的html中的表单数据
- 在不同的文件中使用Javascript获取表单数据
- 使用Javascript读取Webstorage表单数据
- Uploadify-随机表单数据's已返回上载表单
- 如何在使用ajax提交的codeigniter中使用form_validation验证表单数据
- 在post-expressjs之后持久化表单数据
- 需要一个用于AJAX的Javascript库,其中包含多部分/表单数据
- jQuery发布并获取表单数据
- Ajax表单数据phpPOST不工作
- 如何将整个模型集附加到表单数据中,并在MVC中获得它
- 如何从javascript访问表单数据
- 如何从Angular Payments获取表单数据
- 通过javascript获取pdf文件的表单数据
- 有没有一种方法可以在jQuery.serialize()之前获取表单数据,或者与jQuery.sserialize(()
- 在 Angular2 中构建多部分/表单数据 POST 请求并验证输入类型文件
- 无法读取未定义的属性“用户名” - 通过电子邮件在 Node.js 中发送表单数据
- 使用 Ajax 获取表单数据
- 我无法从引导模式中清除表单数据
- 如何从 django 模板语言获取表单数据