Question

我知道我可以在jQuery UI中使用表单验证插件，但为了教我自己一些新的技巧，我采用这种方法。

我有一个jQuery脚本，通过Ajax将表单发布到PHP脚本。然后，该脚本验证输入并将JSON编码的字符串发送回脚本。此时，根据状态，应将验证消息放入模态对话框中，然后打开以告知用户发生了什么。

问题

脚本似乎返回“null”状态。在Chrome的JavaScript控制台中，单击表单的提交按钮后会出现以下行：

Uncaught TypeError: Cannot read property 'status' of null

这是我的 validate_form.js

$(document).ready(function() {
    $("#contact_submit").on("click", function(e){
        e.preventDefault();
        var dataString = $("#frm_contact").serialize();
        console.log(dataString);
        $.ajax({
            type: "POST",
            url: "contact.php",
            data: dataString,
            dataType: "json",
            cache: false,
            success: function(data){
                console.log(data);
                if(!data){
                    alert("null value returned");
                }else if(data.status > 0){
                    $("#response").dialog({
                        autoOpen: false,
                        modal: true,
                        height: 240,
                        width: 320
                    });

                    $("#response").dialog("open");
                };
            }
        });
    });
});

这是 contact.php

<?php
    if(isset($_POST['contact_submit'])){
        $name = trim($_POST['contact_name']);
        $name = ucwords($name);
        $email = trim($_POST['contact_email']);
        $email = strtolower($email);
        $dept = trim($_POST['contact_dept']);
        $dept = ucwords($dept);
        $notes = trim($_POST['contact_notes']);

        // Patterns and Comparison Qualifiers
            $name_pattern = "/^[a-z][a-z ]*$/i";
            $email_pattern = "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/";
            $avail_depts = array("General", "Sales", "Support");
            $notes_minlength = 25;
            $notes_maxlength = 500;

        if(!preg_match($name_pattern, $name)){
            $resp = array("status"=>1, "message"=>"Names may only contain letters and spaces");
        }else{
            if(!preg_match($name_pattern, $name)){
                $resp = array("status"=>2, "message"=>"Invalid e-mail address");
            }else{
                if(!in_array($dept, $avail_depts)){
                    $resp = array("status"=>3, "message"=>"Please select a department");
                }else{
                    if(strlen($notes) < $notes_minlength || strlen($notes) > $notes_maxlength){
                        $resp = array("status"=>4, "message"=>"Comments must be between 25 and 500 characters");
                    }else{
                        // Build the message and e-mail it
                            $to = "info@mydomain.com";
                            $headers = "From: ".$name." <".$email.">";
                            $message .= "Contact Form Submission\n";
                            $message .= "==========================\n\n";
                            $message .= "Contact Name: ".ucwords($name)."\n\n";
                            $message .= "Contact E-mail: ".$email."\n\n";
                            $message .= "Category: ".$dept."\n\n";
                            $message .= "Comments: ".$notes."\n\n";
                            $message .= "\n";

                            if(mail($to, $subject, $message, $headers)){
                                $resp = array("status"=>5, "message"=>"Thanks! We'll be in touch soon!");
                            }else{
                                $resp = array("status"=>6, "message"=>"Something went wrong, please try again");
                            }
                    }
                }
            }
        }
    }

    echo json_encode($resp);
?>

更新1

添加console.log（dataString）;在控制台中产生以下内容：

contact_name=Test&contact_email=testaccount%40mydomain.com&contact_dept=general&contact_notes=this+is+a+test+

正如您所看到的，它应该在25到500个字符之间的音符上失败并返回正确的错误消息。相反，我仍然看到“无法读取属性'状态'（null）”

更新2

这正是我在JavaScript控制台中看到的内容 JavaScript Console

更新3

我决定删除prevent default并直接通过包含<form>的传统method="post" action="contact.php"语句直接发布到联系页面，以查看脚本本身是否正确生成了JSON字符串，它是;这是我最近测试中产生的内容：

{"status":4,"message":"Comments must be between 25 and 500 characters"}

所以要么它没有将它发送回ajax处理程序，要么缺少其他东西。

更新4

我修改了脚本以处理空值，并在没有传递值时提醒我。所以现在显而易见的是，脚本没有将json字符串传递回ajax调用，即使在更新3中我已经验证它正在回显一个屏幕。我很茫然......（上面的更新脚本）

更新5

所以我取得了一些进展。事实证明返回了null，因为在我的PHP脚本中，我正在检查提交按钮是否已设置并且是$_POST数组的一部分。但是，因为我通过jQuery阻止了表单的默认操作，所以它没有被传递。只有dataString中正在发送序列化的表单值。所以现在我在控制台中收到了我期望的错误，但我没有得到模态对话框显示。戏剧还在继续。

Answer 1

大多数浏览器都支持JSON.parse（），它在ECMA-262第5版（JS所基于的规范）中定义。它的用法很简单：

var json ='{“result”：true，“count”：1}'， obj = JSON.parse（json）;

警报（obj.count）;

对于没有的浏览器，您可以使用json2.js实现它。

如前所述，您已经在使用jQuery，有一个$ .parseJSON函数可以映射到JSON.parse（如果可用）或旧版浏览器中的eval形式。但是，这会执行额外的，不必要的检查，这也是由JSON.parse执行的，所以为了获得最好的全面性能，我建议使用它，如下所示：

var json ='{“result”：true，“count”：1}'， obj = JSON＆amp;＆amp; JSON.parse（json）|| $ .parseJSON（JSON）;

这将确保您立即使用本机JSON.parse，而不是让jQuery在将字符串传递给本机解析函数之前对字符串执行完整性检查。

Answer 2

下面我提到了一些要点，试着解决你的问题 1.改变你的方法来获取和尝试。

2.在最后一次回声之后输出die（）并检查输出的确切内容。

Answer 3

因此，经过更长时间的调整，测试和拔出头发，这是工作脚本。

<强>的jQuery

$(document).ready(function() {
    $("#contact_submit").on("click", function(e){
        e.preventDefault();
        var dataString = $("#frm_contact").serialize();
        console.log(dataString);
        $.ajax({
            type: "POST",
            url: "contact.php",
            data: dataString,
            dataType: "json",
            cache: false,
            success: function(data){
                console.log(data);
                if(!data){
                    alert("null value returned");
                }else if(data.err > 0){
                    var $response = $("<div></div>")
                    .dialog({
                        resizable: false,
                        autoOpen: false,
                        modal: true,
                        height: "auto",
                        width: "auto",
                        buttons: { "ok": function() { $(this).dialog("close"); } }
                    });
                    $response.html("Error:");
                    $response.html(data.message);
                    $response.dialog("open");
                    $(".ui-dialog-titlebar").hide();
                };
            }
        });
    });
});

对于PHP脚本，我必须稍微调整它以正确处理它。

<?php
        $name = trim(urldecode($_POST['contact_name']));
        $name = ucwords($name);
        $email = trim(urldecode($_POST['contact_email']));
        $email = strtolower($email);
        $dept = trim($_POST['contact_dept']);
        $dept = ucwords($dept);
        $notes = trim(urldecode($_POST['contact_notes']));

        // Patterns and Comparison Qualifiers
            $name_pattern = "/^[a-z][a-z ]*$/i";
            $email_pattern = "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/";
            $avail_depts = array("General", "Sales", "Support");
            $notes_minlength = 25;
            $notes_maxlength = 500;

        if(!preg_match($name_pattern, $name)){
            $resp = array("err"=>1, "message"=>"Names may only contain letters and spaces");
        }else{
            if(!preg_match($email_pattern, $email)){
                $resp = array("err"=>2, "message"=>"Invalid e-mail address");
            }else{
                if(!in_array($dept, $avail_depts)){
                    $resp = array("err"=>3, "message"=>"Please select a department");
                }else{
                    if(strlen($notes) < $notes_minlength || strlen($notes) > $notes_maxlength){
                        $resp = array("err"=>4, "message"=>"Comments must be between 25 and 500 characters");
                    }else{
                        // Build the message and e-mail it
                            $headers = "From: ".$name." <".$email.">";
                            $message .= "Contact Form Submission\n";
                            $message .= "==========================\n\n";
                            $message .= "Contact Name: ".ucwords($name)."\n\n";
                            $message .= "Contact E-mail: ".$email."\n\n";
                            $message .= "Category: ".$dept."\n\n";
                            $message .= "Comments: ".$notes."\n\n";
                            $message .= "\n";

                            if(mail($to, $subject, $message, $headers)){
                                $resp = array("err"=>5, "message"=>"Thanks! We'll be in touch soon!");
                            }else{
                                $resp = array("err"=>6, "message"=>"Something went wrong, please try again");
                            }
                    }
                }
            }
        }
    echo json_encode($resp);
?>

一切都完美，模态警报和所有用户。感谢那些试图帮助的人！

jQuery通过Ajax发布到PHP验证脚本

3 个答案: