jQuery发布并获取表单数据

jQuery Post and Get Form data

本文关键字:表单 数据 获取 jQuery      更新时间:2023-09-26

提交表单时,我可以使用$_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");
                    });
                });