Question

我正在发送表单的内容，即名称，上载字段等到api。点击“提交”按钮后，将打开一个新标签，我得到了答复：

{“成功”：false，“错误”：{“代码”：0，“消息”：“给定的数据未能通过验证。”，“错误”：{“ something_id”：[“必填字段。“]}}}

这个（json？）对“普通”用户没有意义。那么是否有可能在打开新选项卡之前从api获取响应并以某种方式显示它，以便用户能够理解？像“成功–您可以关闭标签”或“出现错误–您需要再次执行此操作”一样？

我对api和json不太了解，所以最好了解一下它是否可以/可以工作？

Answer 1

这是一种解决方法：

首先，您需要通过在标记内或结束标记之前添加此代码来在页面上加载jQuery

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

然后给您的表单一个ID（例如my_form_id）

然后将其添加到您的HTML

<script>
    $(document).ready(function() {
        // listen for when the form is submitted
        $('#my_form_id').submit(function(event) {
            // get the form data
            var formData = $('#my_form_id').serialize();

            // send the form to API using Ajax
            $.ajax({
                type : 'POST', // define the type of HTTP we want to use
                url  : 'your_full_api_url', // the url where you want to POST the data
                data : formData, // your form data object
                dataType : 'json', // what type of data do you expect from the API
                encode : true
            }).done(function(data) {
                 if(data.success==='true') {
                      //No error... all went well
                      alert('Your data was successfully submitted');
                      //You can do any other thing you want here
                 } else {
                     //get the error message and alert it 
                     alert(data.message);
                 }
            });
            event.preventDefault();
        });

    });
    </script>

现在发生的事情是，每次提交表单时，都会调用脚本并使用ajax收集表单数据并将其提交到您的API URL。

然后解析响应并检查是否成功提交了数据。

如果没有，它将使用浏览器警报功能从您的API打印我们的错误消息。

提交表单到API后转换响应

1 个答案: