Question

我想在执行我的Ajax代码后返回一个字符串。这就是我的代码在html中的样子：

<script>
    (function($){
        $('#form').submit(function(event){
            var formData = new FormData($("#form")[0]);
            event.preventDefault();
            $.ajax({
                url: "/transform",
                type: "POST",
                data: formData,
                success: function(data){
                    data
                },
            });     
        });
    });(jQuery);
</script>

基本上，我想要的是对方法/transform完成后将返回的字符串进行反播，例如“ Done！”，我想在localhost:5000中而不是在控制台中看到此消息

要执行我的代码，我可以访问localhost:5000，但是，当显示/transform返回的消息时，URL为localhost:5000/transform，这使我认为ajax无法正常工作。

对于我所阅读的内容，通过使用Ajax可以异步执行我的代码，因此它无法自动访问/transform的返回值。我已经阅读了有关回调的内容，但仍然不知道如何使用它，我对此非常陌生（我从昨天开始，这是我第一次同时使用html和js）。

我也检查了这个问题并回答How do I return the response from an asynchronous call?，但仍然看不到如何在他们的代码中插入他们正在谈论的回调。

有办法吗？

这是我正在使用的html：

<html>
<body>
    {% block content %}{% endblock %}
    <div class="container">
    <div class="col-md-6 center">
        <div class="panel panel-default">
                <div class="panel-body">
                <form accept-charset="UTF-8" role="form" action="/transform" method="post" enctype="multipart/form-data" id="form" >        
                    <div class="panel-heading">

                        <h3 class="panel-title" style="text-align:center">Select a file</h3>
                    </div>
                    <fieldset>
                        <div class="form-group">
                        <input class="form-control" type="file" name="data_file" />
                    </div>
                    <input class="btn btn-lg btn-success btn-block" type="submit" name="submit" id="submit" value="Submit" placeholder="submit"/>
                </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Answer 1

首先，如Robin Zigmond所评论的那样，您的脚本中存在语法错误，这导致脚本无法正常工作。因此，您担心脚本是否被执行是正确的。脚本的最后一行应该看起来像这样

})(jQuery);

（在关闭和打开之间都取消了分号）

您会在开发人员控制台（大多数浏览器中为F12）中记下这些内容，正如我在评论中已经提到的那样。您还将在其中看到console.log输出，这对于调试javascript非常方便。

第二，为了显示您的回复，您可以执行以下操作

success: function(data) { 
    $('#form').prepend( "<p>" + data + "</p>" );
}

Answer 2

这取决于您的目标，这可能不是您长期解决方案想要的，但是鉴于您刚刚起步，我认为最好看看它是如何工作的。

假设您将返回data而没有任何问题，则可以使用jQuery作为中间对象在DOM中显示它。例如，您可以在想要在HTML中显示消息的位置添加<div id="confirmationMessage"></div>。然后，您可以使用jQuery将文本放入DOM中，如下所示：

success: function(data) { 
    $('#confirmationMessage').text(data)
}

如何在Ajax成功函数中返回字符串

2 个答案: