我知道我可以在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控制台中看到的内容
更新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
中正在发送序列化的表单值。所以现在我在控制台中收到了我期望的错误,但我没有得到模态对话框显示。戏剧还在继续。
答案 0 :(得分:0)
大多数浏览器都支持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在将字符串传递给本机解析函数之前对字符串执行完整性检查。
答案 1 :(得分:0)
下面我提到了一些要点,试着解决你的问题 1.改变你的方法来获取和尝试。
2.在最后一次回声之后输出die()并检查输出的确切内容。
答案 2 :(得分:0)
因此,经过更长时间的调整,测试和拔出头发,这是工作脚本。
<强>的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);
?>
一切都完美,模态警报和所有用户。感谢那些试图帮助的人!