如何通过HTML表单使用jQuery、JSON和AJAX？

17 浏览
0 Comments

如何通过HTML表单使用jQuery、JSON和AJAX？

当HTML表单被填写时，我需要发送一个JSON。我有以下HTML代码：


Insert title here




    Nome:  
    Idade:

以及以下JavaScript代码：

src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
var arr = {
    City : 'Moscow',
    Age : 25
};
$(document).ready(function() {
    //点击提交按钮
    $("#submit").on('click', function() {
        //发送ajax请求
        $.ajax({
            url : 'http://localhost:8080/DBRest/rest/escreve',
            type : "POST", // 请求类型 POST || GET
            dataType : 'json', // 数据类型
            contentType : 'application/json; charset=utf-8',
            data : $("#form").serialize(), // 提交的数据
            data : JSON.stringify(arr)
        })
    });
});

我已经在这里、这里和这里搜索过。我尝试创建一个`arr`变量来模拟填写的表单，但是没有得到任何结果。我想知道`dataType`和`contentType`之间的区别。关于这行代码：

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

这是正确的吗？在`#form`周围使用单引号和双引号有什么区别？

0

2 答案

0 Comments

问题在于，表单使用<input name=参数进行序列化。

例如：

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

这导致通过Ajax提交表单时，无法正确地获取表单数据。在这种情况下，可以使用jQuery来解决这个问题。

首先，需要在HTML页面中引入jQuery库。可以通过以下代码来实现：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

然后，可以使用jQuery的serializeArray()方法来序列化表单数据。例如：

var formArray = $('form').serializeArray();

接下来，可以将序列化后的表单数据转换为JSON格式。可以使用jQuery的serializeJSON()方法来实现。例如：

var jsonData = JSON.stringify(formArray);

最后，可以使用Ajax来将JSON数据发送到服务器。可以使用jQuery的$.ajax()方法来实现。例如：

$.ajax({
   url: 'your_server_url',
   type: 'POST',
   data: jsonData,
   contentType: 'application/json',
   success: function(response) {
      // 处理成功响应
   },
   error: function(xhr) {
      // 处理错误响应
   }
});

通过这种方法，可以使用jQuery、JSON和Ajax通过HTML表单来实现数据的传输和处理。

0
0 Comments

问题的原因是代码中存在一些错误，解决方法是对代码进行修改。

首先，data属性被设置了两次，需要移除data: JSON.stringify(arr)。

其次，如果发送的是序列化的表单数据，它将是x-www-form-urlencoded格式，而不是JSON格式，所以应该移除contentType属性，因为表单编码是默认设置的。

然后，HTML中的元素缺少必需的name属性，这个属性在服务器端进行序列化和获取值时是必需的。

Nome:  
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。

0