将 html 表单结果作为 json 发布到 api答案

【问题标题】：post html form results to api as json将 html 表单结果作为 json 发布到 api
【发布时间】：2018-11-23 19:22:13
【问题描述】：

我想提交一个表单并将值以 json 格式发送到 api 并将响应保存在一个变量中。当我使用以下代码尝试此操作时，我收到“内部服务器错误”消息。

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script>
        $('#myForm').ajaxForm({
            url : 'myurl.com', 
            dataType : 'json',
            success : function (response) {
                alert("The server says: " + response);
            }
        });
    </script>
</head>

<body>
    <form class="myForm" method="POST" action="myurl.com">
        <div class="form-group row">
            <label for="example-text-input" class="col-2 col-form-label">Season</label>
            <input class="form-control" type="text" id="season">
        </div>

        <div class="form-group row">
            <label for="example-number-input" class="col-2 col-form-label">Students</label>
            <input class="form-control" type="number" id="num_students">
        </div>

        <div class="form-group row">
            <label for="example-number-input" class="col-2 col-form-label">teachers</label>
            <input class="form-control" type="number" value="42" id="num_teachers">
        </div>

        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</body>
</html>

api 采用的参数是 'season'、'num_teachers'、'num_students'。一旦它拥有所有参数，它将返回一个结果响应。如何将表单结果发送到 api 并取回响应？

【问题讨论】：

How to send a JSON object using html form data的可能重复
首先，如果您遇到内部服务器错误，则该错误是在后端触发的，可能您没有传递一些必需的参数，您需要调试后端代码以找出原因是错误。另一方面，您尝试通过其 id $('#myForm') 发送表单，并且该表单没有分配的 id 属性，但它具有类属性

标签： javascript html json ajax

【解决方案1】：

我不知道你为什么使用jQuery插件在Ajax中发送表单，完全没用。

$('#myForm').on('submit', function() { // Fired listener when submit button is clicked.
  $.ajax({
    url: 'myurl.com',
    dataType : 'json', // Try text also, maybe the api donn't send result in json. Text always work.
    data: $('#myForm').serialize(); // The form to send.
    success : function (response) {// Get response on successful sever connection.
      console.log(response); // or alert
    }, error: function (err) { // Get error on failed connection to server.
      console.log(err); // or alert
    }
  }
});

用那个替换你的函数。删除 html 表单标签上的 action 属性。现在您处理来自服务器的错误和响应。这意味着如果服务器返回错误，它将显示在您的控制台中，您将能够知道问题所在。另外，你真的需要这个旧版本的 jQuery，因为我们现在是 3.3.1 版本。

【讨论】：