如何通过html表单使用jquery、json和ajax？答案

【问题标题】：How to use jquery, json and ajax through html form?如何通过html表单使用jquery、json和ajax？
【发布时间】：2017-04-07 13:34:08
【问题描述】：

当在 html 上填写表单时，我需要发送一个 json。我有以下html：

<head>
<title>Insert title here</title>
</head>
<body>
<form id="form">
    Nome: <input type="text" id="nome" /> 
    Idade: <input type="number" id="idade" /> 
    <input type="button" id="submit" value="submit"/>
</form>

还有下面的js：

src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
var arr = {
    City : 'Moscow',
    Age : 25
};

$(document).ready(function() {
    //click on button submit
    $("#submit").on('click', function() {
        //send ajax
        $.ajax({
            url : 'http://localhost:8080/DBRest/rest/escreve',
            type : "POST", // type of action POST || GET
            dataType : 'json', // data type
            contentType : 'application/json; charset=utf-8',
            data : $("#form").serialize(), // post data || get data
            data : JSON.stringify(arr)
        })
    });

});

我已经找到了here、here 和here。

我尝试创建一个 arr 变量来模拟填充的表单，但也没有得到任何东西。我想知道dataType和contentType的区别。关于这一行：

data : $("#form").serialize()

这是正确的吗？ #form 周围的单引号和双引号之间存在区别

【问题讨论】：

您确定问题不是表单提交吗？也许尝试$('#form').on('submit', function(e) { e.preventDefault(); //continue on with what you were doing }); 而不是监听提交按钮的点击。

标签： jquery html json ajax

【解决方案1】：

首先，您要设置data 属性两次。删除data: JSON.stringify(arr)。

其次，如果您发送序列化表单，它将是 x-www-form-urlencoded，而不是 JSON，因此您应该删除 contentType 属性，因为表单编码是默认设置。

那么您的 HTML input 元素缺少必要的 name 属性，该属性是序列化和检索服务器上的值所必需的。

Nome: <input type="text" id="nome" name="nome" /> 
Idade: <input type="number" id="idade" name="idade" />

最后，您应该将您的事件处理程序挂钩到 form 元素的 submit 事件并调用 preventDefault() 以停止标准提交，如下所示：

$("#form").on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        url: 'http://localhost:8080/DBRest/rest/escreve',
        type: "POST",
        dataType: 'json',
        data: $("#form").serialize()
    })
});

大概您还希望success 和error 处理函数（或done() 和fail() 方法）来处理您从请求中返回的响应。

【讨论】：

很抱歉，这不起作用。 Chrome 的 F12 功能没有显示任何问题。我可以向您展示什么样的反馈？有没有更好的分析和调试方法？
你说的“它没有用”是什么意思？你期待发生什么？首先在控制台的网络选项卡中检查请求，并确保响应代码为200 OK。此外，正如我所提到的，您在 AJAX 调用中缺少任何回调处理程序，因此如果这是您所期望的，则 UI 将不会更新
我收到 415 错误并通过更改 dataType:'application/json' 解决了它。除此之外，一点变化都没有。非常感谢
很高兴你解决了它。必须删除该行意味着您的 URL 没有返回 JSON - 至少不是有效的 JSON

【解决方案2】：

这里的问题是，表单是使用<input name= 参数序列化的。例如

<input type="text" id="nome" name="nome" />

【讨论】：