Question

我是一名编码初学者，目前我正在学习如何使用javascript编写代码。我陷入了练习问题，我必须利用AJAX从表单中检索数据，将数据转换为JSON，然后附加使用创建的JSON数据的消息。当我单击提交按钮时，成功功能似乎不起作用。我也在使用JQUERY。我的主要问题是，我必须创建一个单独的JSON文件，或者在提交表单时是否自己生成JSON数据。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class="tour" data-daily-price="357">
  <h2>Paris, France Tour</h2>
  <p>$<span id="total">2,499</span> for <span id="nights-count">7</span> Nights</p>
  <form method="POST">
    <p>
      <label for="nights">Number of Nights</label>
    </p>
    <p>
      <input type="number" name="nights" id="nights" value="7">
    </p>
    <input type="submit" value="book">
  </form>
</div>
<script type="text/javascript" src="jquery-2.2.3.min copy 4.js"></script>
<script type="text/javascript" src="json.js"></script>
</body>
</html>

$(document).ready(function() {
  $("form").on("submit", function(event) {
    event.preventDefault();
    $.ajax("http://localhost:8888/json.html", {
      type: 'POST',
      data: $("form").serialize(),
      dataType: 'json',
      contentType: "application/json",
      success: function(data) {
        var msg = $('<p></p>');
        msg.append("Trip booked for " + data.nights+" nights.");
        $(".tour").append(msg);

      }
    });
  });
});

Answer 1

我的主要问题是，我必须创建一个单独的JSON文件

没有。如果要发送JSON，则必须构造一个JSON字符串，但不需要将其设为文件。

或者当我提交表单时，JSON数据是否会自己生成。

没有。您必须自己创建JSON。

$("form").serialize()将数据转换为application/x-www-form-urlencoded格式。如果你想发送JSON，请不要使用它。

没有将表单数据编码为JSON的标准，因此您必须遍历所有表单控件（或serializeArray中的数据）以构建所需的数据结构，然后通过JSON.stringify传递它

Answer 2

扩展Quentin所说的内容，您需要自己解析表单中的字段和值，并将它们放在JSON对象中。我一直在使用以下函数（在另一个堆栈溢出答案中找到，但我没有参考），它将迭代表单查找命名字段，然后将其放入JSON对象。

(function ($) {
    $.fn.serializeFormJSON = function () {

        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
})(jQuery);

此函数被添加到JQuery运算符$中，因此可以像

一样调用

var data = $(this).serializeFormJSON();

然后，您可以直接在AJAX调用中使用它，或者在必要时首先对其进行字符串化。

EDIT;意味着要添加您只应在form.submit回调中调用此内容，因为它会将该表单用作this参数。

如何使用AJAX将表单数据转换为JSON数据？

2 个答案: