javascript - 为什么这个 AJAX 表单没有提交？

Question

每当我按下表单中的“提交请求”按钮时，不会弹出任何错误，也不会将我重定向到 PHP 脚本中注明的页面。关于为什么会发生这种情况的任何想法？

来自带有表单的网页的代码:

<form id="consultation-reservation" action="actions/consultation-request.php" method="post">
  <input name="fullname" type="text" placeholder="Full Name (Required)" class="mt5" />
  <input name="phonenumber" type="text" placeholder="Phone Number (Required)" class="mt5" />
  <input name="emailaddress" type="text" placeholder="E-Mail Address (Required)" class="mt5" /> 
  <textarea name="comments" placeholder="Additional Comments/Questions" class="mt10"></textarea>  
  <p class="hidden" id="consultation-reservation-error">Please verify all required fields are complete.</p>  
  <a class="button" id="consultation-reservation-submit">Submit Request</a>
</form>

<script type="text/javascript">
$(document).ready(function(){                                               
    $("#consultation-reservation-submit").click(function(){
        $("#consultation-reservation").submit();
    });
});

$('#consultation-reservation').submit(function(e) {
    register();
    e.preventDefault();
});

function register()
{               
    jQuery.ajax({
        method: "POST",
        url: "actions/consultation-request.php",
        data: $('#consultation-reservation').serialize(),
        dataType: "json",
        success: function(msg){

        if(parseInt(msg.status)==1)
        {
          window.location=msg.txt;
        }
        else if(parseInt(msg.status)==0)
        {
            error(1,msg.txt);
        }
        }
    });

}               

function hideshow(el,act)
{
    if(act) $('#'+el).hide(0).slideDown(500, 'linear');
    else $('#'+el).hide();
}   

function error(act,txt)
{
    if(txt) $('#consultation-reservation-error').html(txt);
    $('#consultation-reservation-error').hide(0).slideDown(500, 'linear');
}       
</script>

应该通过 ajax 执行的 PHP 脚本:(我打算将 mysql_real_escape_string 应用于包含表单数据的变量，但还没有)

<?php

if(empty($_POST['fullname']) || empty($_POST['phonenumber']) || empty($_POST['emailaddress']))
{
    die('{status:0,"txt":"Please verify all required fields are complete."}');
}

$name = $_POST['fullname'];
$phonenumber = $_POST['phonenumber'];
$email = $_POST['emailaddress'];
$comments = $_POST['comments'];


if(!(preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['emailaddress'])))
    die('{status:0,"txt":"Please Provide a Valid E-Mail Address."}');

echo '{status:1,txt:"consultation-request-successful"}';

?>

Answer 1

echo '{status:1,txt:"consultation-request-successful"}';

上面是无效的 JSON，因为它没有在 txt 和 status 键周围使用双引号。您将响应数据类型指定为 json，因此 jQuery 将尝试将响应解析为 JSON，如果失败，它将运行错误处理程序(如果已设置)而不是成功处理程序。

因此要么添加双引号，要么以其他方式构建 JSON:

$response = array('status' => 1, 'txt' => 'consultation-request-successful');
echo json_encode($response);

以这种方式构建 JSON 要好得多，因为所有引号都会自动处理，值中的特殊字符也会根据需要进行转义。