Question

我想提交一个表单，并以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的参数为“季节”，“ num_teachers”，“ num_students”。一旦具有所有参数，它将发送回结果响应。如何将表单结果发送到api并获取响应？

Answer 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。

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

1 个答案: