Question

HTML

<html>
    <body>
        <form id="add" method="post" action="index.php">
            <input type="text" name="first">
            <br>
            <input type="submit" value = "submit">
        </form>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="../js/jqueryvalidation.js"></script>
        <script src="../js/globaltest.js"></script>
    </body>
</html>

的Javascript

$(document).ready(function($) {

    $('#add').validate({

        rules: {

            first: {
                required: true
            }
        },
        submitHandler: function(form) {

            $.ajax({
                url: 'login.php',
                datatype: "json",
                type: "POST",
                data: $('#add').serialize(),

                success: function(data) {
                    console.log(data);

                }
            });
            return false;
        }
    });
});

PHP

<?php

$json = array(
    'name' => 'Bob'
);

echo json_encode($json);

当我使用jQuery表单验证插件时，我注意到当我提交表单并查看控制台时，我没有收到对象。这就是输出的样子：

但是，如果我在不使用jQuery表单验证插件的情况下创建普通表单，我将获得我正在寻找的预期输出。我可以清楚地看到它是一个对象：

我不确定为什么会有区别。 html和PHP文件都是相同的结构。我该怎么办才能解决这个问题？谢谢。

Answer 1

dataType: "json"告诉jQuery期望ajax请求的响应是一个json对象。

但是你的PHP文件没有返回一个，它很可能默认将内容作为text/html返回。

在返回响应之前，将此标头添加到PHP文件中： header('Content-Type: application/json');

顺便说一下，虽然dataType属性不区分大小写，但将camel-case用于属性名称是一种很好的做法。

将JSON与jQuery表单验证插件一起使用

1 个答案: