Ajax 代码将表单数据发送到 PHP 服务器进行验证答案

【问题标题】：Ajax code sending form data to PHP server for validationAjax 代码将表单数据发送到 PHP 服务器进行验证
【发布时间】：2011-10-29 10:10:47
【问题描述】：

我很难将此 AJAX 代码实现到我的表单中，以便页面不需要重新加载但仍会执行服务器端验证。我是 AJAX 和 PHP 的新手，所以我正在处理几个表单模板，但我已经为此工作了几个小时，但我不知道为什么它不起作用。任何帮助将不胜感激。

这是 HTML 代码的一部分：

<div id="popupContact">
 <form id="formElem" name="formElem" action="" method="post">
     <fieldset class="step">
          <legend>Personal Details</legend>
          <p>
              <label for="firstname">First Name</label><em>*</em>
              <input id="firstname" name="firstname" />
          </p>
          <p>
              <label for="lastname">Last Name</label><em>*</em>
              <input id="lastname" name="lastname" />
          </p>
          <p>* fields are required</p>
      </fieldset>
      <fieldset class="step">
          <legend>Confirm</legend>
      <p>Before you submit your information, please ensure that each step
    below has this <img src="../img/global/checked.png" alt="Complete" >
    above them. If there is a step that has this 
    <img src="../img/global/error.png" alt="Error" >, please click on that tab
    and review the information to ensure it is correct and complete. Thank you.</p>
    <p>
                <label for="human">Please Type: "Something"</label><em>*</em>
                <input id="human" name="human" />
            </p>
            <p class="submit">
                <button id="registerButton" type="submit">Submit</button>
            </p>
        </fieldset>
   </form>
</div>

这是 JAVAScript 代码：

$(function() {
var form = $("#formElem");
var fname = $("#firstname");
var lname = $("#lastname");
var address = $("#streetaddress");
var city = $("#city");
var state = $("#state");
var phone = $('#phone');
var email = $('#email');
var insurance = $('#insurance');
var license = $('#license');
var human = $('#human');
$('#registerButton').bind('click',function(){
    if($('#formElem').data('errors')){
        alert('Please correct the errors in the Form');
        return false;
    }
    else {
        var dataString = 'fname='+$('#firstname').val()+'&lname='+$('#lastname').val()+'&address='+$('#streetaddress'.val())+'&city='+$('#city')+'&state='+$('#state').val()+'&phone='+$('#phone').val()+'&email='+$('#email').val()+'&insurance='+$('#insurance').val()+'&license='+$('#license').val()+'&human='+$('#human').val();
        $.ajax({
        type: "POST",
        url: "js/validation.php",
        data: dataString,
        async: false,
        success: function() {
                $('#popupContact').html("<div id='message'></div>");
                $('#message').html("<h2>Inquiry Submitted!</h2>")
                .append("<p>We will be in touch soon.</p>")
                .hide()
                .fadeIn(1500, function() {
                $('#message').append("<img id='checkmark' src='..img/global/check.png' />");
                });
        }
    });
    return false;
    }
 });

这是 PHP 代码：

<?php
if(isset($_POST['email'])) {
$email_to = "somebody@somewhere.com";
$email_subject = "Inquiry";
function died($error) {
    // your error code can go here
    echo "We are very sorry, but there were error(s) found with the form you submitted. ";
    echo "These errors appear below.<br /><br />";
    echo $error."<br /><br />";
    echo "Please go back and fix these errors.<br /><br />";
    die();
}

// validation expected data exists
if(!isset($_POST['firstname']) ||
    !isset($_POST['lastname']) ||
    !isset($_POST['email']) ||
    !isset($_POST['phone']) ||
    !isset($_POST['streetaddress']) ||
    !isset($_POST['city']) ||
    !isset($_POST['state']) ||
    !isset($_POST['insurance']) ||
    !isset($_POST['license']) ||
    !isset($_POST['human'])){
    died('We are sorry, but there appears to be a problem with the form you submitted.');      
}

$firstname = $_POST['firstname']; // required
$lastname = $_POST['lastname']; // required
$emailfrom = $_POST['email']; // required
$phone = $_POST['phone']; // required
$address = $_POST['streetaddress']; //required
$city = $_POST['city']; //required
$state = $_POST['state']; //required
$insurance = $_POST['insurance']; //required
$license = $_POST['license']; //required
$human = $_POST['human']; //required

$error_message = "";
$email_exp = '/^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/';
if(!preg_match($email_exp,$emailfrom)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}

$email_message = "Form details below.\n\n";

function clean_string($string) {
  $bad = array("content-type","bcc:","to:","cc:","href");
  return str_replace($bad,"",$string);
}

$email_message .= "First Name: ".clean_string($firstname)."\n";
$email_message .= "Last Name: ".clean_string($lastname)."\n";
$email_message .= "Email: ".clean_string($emailfrom)."\n";
$email_message .= "Telephone: ".clean_string($phone)."\n";
$email_message .= "Address: \n".clean_string($address)."\n";
$email_message .= "".clean_string($city).", ";
$email_message .= "".clean_string($state)."\n";
$email_message .= "Have Insurance: ".clean_string($insurance)."\n";
$email_message .= "Have License: ".clean_string($license)."\n";


// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers); 
?>

<!-- include your own success html here -->

Thank you for contacting us. We will be in touch with you very soon.

<?php
}       
?>

我省略了大部分实际验证代码部分，所以我知道您看到的内容并不完整。我不明白的是，如果没有 AJAX 部分，表单验证在客户端和服务器端都可以正常工作，但是当我添加 AJAX 时，有些东西没有连接。提前感谢您的帮助。

编辑有人对我的代码哪里出错有建议吗？

编辑好的，所以如果我将js/validation.php 放在表单的action="" 标记中并禁用代码的AJAX 部分，那么验证就可以正常工作，但我会被转发到一个带有确认代码的空白页面。这对这个问题有任何启示吗？真的，任何帮助表示赞赏。我尝试使用 cmets 中给出的提示，但由于某种原因没有任何反应。看起来我的页面已刷新，但没有确认消息或任何内容。我完全迷失了。

【问题讨论】：

这并不能回答您的验证问题，但我想指出您可以使用 $.post("test.php", $("# testform").serialize());.. 无需获取每个值并将它们作为字符串粘在一起。
您使用的是 Apache 错误日志和 Firefox 错误控制台吗？对于找出 ajax 错误非常有用。
@Stephen - 所以在这种情况下，我可以将其重写为：$.post("validation.php",$('#contact_form').serialize()); 并去掉 var dataString = blahblahblah; 部分？
@jcomeau_ictx 我不知道有类似的东西可用。您是否有关于如何使用它们的说明？
没错，查看文档@@api.jquery.com/jQuery.post

标签： php ajax jquery validation

【解决方案1】：

你离得不远了，但我想我会以稍微不那么激进的方式来攻击它。

从表单开始，我只需将其设为带有 id 的表单，并将提交按钮停在表单标签之外。为什么？因为表单中的按钮可能会产生一些不良影响（例如提交到一个神奇的黑洞）更少的代码 = 快乐的开发人员。
我会用点击处理程序捕捉按钮的点击。所以：

$('#registerButton').click(function(){ 在这里做你的ajax });
我最初会通过前端验证来捕获错误，因为它可以节省服务器命中并且从 UI 的角度来看更令人愉悦。它也更快......不，它不能完全依赖，因为任何有能力的人都可以覆盖它，但这是一个很好的第一步。我个人最喜欢的是here
在点击动作中，我会使用 ajax（就像你在你的例如）将表单提交到您的脚本进行验证。序列化您的表单以发送：
```
    $.ajax({
            type: "POST",
            url: "js/validation.php",
            data: $('#formElem').serialize(),
            ...
```
我会让脚本返回一个带有结果大小写的 json 字符串（真/假）和支持该案例的数据（例如成功，以及一组错误的错误案例）所以，你是使用上面的 ajax 调用完全正确，但返回数据将我的示例输入为 json（不是 dataString）并在其中添加一个 var 这成功后的括号（让我们以 returndata 为例）然后，在您的成功回调，返回的数据将作为 returndata.field（将字段更改为等于 json 字符串）如果它不起作用，请检查输出 jsonlint.com
在步骤 4 的 ajax 调用成功后，设置两种情况（if/else）。如果您的结果案例为真，请让他们继续并按照您的 UI 指示指示成功。如果结果案例为假，则遍历错误案例数组以通知用户每个问题。

你快到了。如果这是您第一次使用 jQuery AJAX，我真的印象深刻！

【讨论】：

这正是我需要的指导。感谢您花时间查看我的代码并编写它。我真的很感激！

【解决方案2】：

我知道你已经接受了一个答案，但我也想建议检查一下 jQuery Validate 插件 - http://bassistance.de/jquery-plugins/jquery-plugin-validation/ - 真的不需要重写轮子。每当我使用 jQuery 进行任何类型的客户端验证时，我都会亲自使用这个插件。我也提到了这一点，因为该插件带有本机“远程”验证类型，您可以通过几行简单的代码将其用于任何类型的远程验证。我还在某些地方读到 jQuery 可能会在某个时候开始“正式”支持验证插件，因此尽早开始使用它永远不会有坏处。只是一些思考的食物！

【讨论】：