Question

我一直在关于CodeSchool的jQuery课程，似乎被困在我自己的项目上。我正在处理一个基本的依赖下拉菜单，当我点击提交按钮时，我希望加载一个指定的对象。但是，我的AJAX请求上的错误消息出现了。

我注意到的是，如果我没有将我的dataType指定为JSON，我的对象就会加载。然而，我的成功回调回归为＆＃34; Car：undefined Price：undefined ...＆＃34;

我的大多数代码都可以在这里找到：http://cdpn.io/bozie

我无法附加我的AJAX结果页面。

请帮忙

Answer 1

更新：AJAX响应中格式错误的JSON

JSON specification要求您的属性名称和字符串值用双引号括起来。例如：

{
    "Car": "2012 Chevrolet Avalanche",
    "Price": "$10,999",
    "Features": "Soft seats!"
}

根据jQuery.ajax() documentation，在指定dataType: 'json'时，“严格解析JSON数据;拒绝任何格式错误的JSON并抛出解析错误。”

代码中关注的领域

您的AJAX请求URL应该是服务器端页面

查看您的代码，我发现您正在向modelsTest.html发送您的AJAX请求。我必须看到该页面上的代码才能给出准确的答案，但我怀疑是因为您将请求发送到HTML页面，但指定了JSON数据类型，这将导致混淆;默认情况下，HTML页面仅返回HTML类型的数据。

通常，您的AJAX请求将发送到服务器端脚本页面进行处理。例如：modelsTest.php，modelsTest.asp等或某些到服务器端控制器的REST API路由，例如/api/modelsTest/

如果您手动设置响应头，您的服务器可以返回任何类型的数据，或者如果您的服务器端脚本没有在响应头中指定MIME类型，则jQuery可以做出最佳猜测;只是不要在AJAX属性中指定dataType。

更新：对于像这样的静态测试，如果您指定dataType: 'json'，则可以将JSON放在HTML文件中。 jQuery不会混淆;相反，它将覆盖默认的HTML响应头并将内容解析为JSON。但是，如果服务器支持此MIME类型，您也可以将静态响应放在.json文件中。

简化您的测试

更新：在您的其他信息中，您表明您此时并未实际使用下拉菜单;并且您只希望来自AJAX请求的静态JSON响应。

出于静态测试的目的，我建议此时不要包含drop-dwon菜单，因为它们是多余的和令人困惑的（对于你和我），如果没有实际使用的话。在进行故障排除时，它还有助于删除其他多余的脚本，并专注于手头的任务。这是您的AJAX测试，简化：

<button type="submit">Test AJAX Response</button>
<div class="response"></div>
<script>
$(function() {
    $('button').click(function() {
        $.ajax('modelsTest.html', {
            dataType: 'json',
            success: function(data) {
                $('.response').html(
                    $('<p></p>')
                    .append('Car: ' + data.Car + '<br>')
                    .append('Price: ' + data.Price + '<br>')
                    .append('Features: ' + data.Features)
                );
            },
            error: function(data) {
                $('.response').html(
                    "<p>We're sorry, but our vehicle didn't load. Call us for availability.</p>"
                );
            }

        });
    });
});
</script>

序列化您的表单数据，立即将其全部传递

当您准备好开始将数据传递到服务器端页面进行处理时，传递表单数据的一种简单方法就是将其序列化。

在您的示例中，您只在AJAX请求中传递一个变量：

data: {"vehicle": $('#vehicle').val()},

因此，表单处理页面（modelsTest.html或服务器端等效页面）只接收部分数据，可能无法完成返回正确JSON响应所需的任何函数。

通常，您会序列化整个表单并立即传递所有表单：

data: $('#inv_selection form').serialize(),

现在，您的表单处理页面（modelsTest.html或服务器端等效页面）具有必要时使用的所有表单数据。

基本相关下拉菜单设置

另外，值得一提的是，但不是可能导致AJAX响应错误的原因是你提到你正在处理一个基本的依赖下拉菜单。示例中的选择菜单不相互依赖。

通常，从属菜单设置要求用户在第二个菜单填充仅与父菜单相关的选项之前从第一个菜单中进行选择。

在您的情况下，用户必须在模型菜单中进行选择，然后才能填充模型菜单。模型菜单应该是可见的，但禁用，直到根据 Make 菜单中的选择填充相关选项。

这可以通过使用javascript在父菜单（ Make ）上侦听更改事件来实现，该事件调用查询本地数组或对象的函数与所选 Make 相关的模型或发送自己的AJAX请求以获取选项数组或对象。

注意： 年菜单可能是也可能不是制作菜单的先决条件。如果不是每个品牌都列出了所有年份，那么 Make 应该取决于用户对年的选择。

使用局部变量数据的依赖下拉菜单的一个很好的例子，不需要AJAX： Select Box Change Dependent Options dynamically

现在您已经知道如何进行AJAX，您可以轻松地向服务器端页面执行AJAX请求以获取相关菜单选项，而不是使用本地硬编码变量。

Answer 2

@gfullam，这是你的详细答案。以下是我的modelsTest.html页面的唯一内容：

{ 汽车：2012款雪佛兰Avalanche，价格：'$ 10,999'，特色：'软座椅！' }

我是否必须指定该页面上的内容类型或更改文件扩展名？它不是在php或其他服务器端扩展的原因是因为我还没有达到php / ruby / python等的目的。

我忘了提到我正在使用从属下拉菜单向后工作。我想弄清楚如何首先返回结果页面中的指定对象，然后如何使下拉菜单依赖。我仍然不知道如何做到这一点，如果你能指出我正确的方向，这将是非常有帮助的。：）

如何使表单提交使用AJAX＆amp;返回正确的结果JSON？

2 个答案: