时间戳

首页 > 解决方案 > 如何在 Ajax 成功函数中返回字符串

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

问题描述

我想在执行我的 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完成后将返回的字符串，例如“完成！”，我想在控制台中看到这条消息localhost:5000，而不是在控制台中。

但是，要执行我访问的代码localhost:5000，当显示返回的消息时，/transformurl 是localhost:5000/transform让我认为 ajax 不起作用的原因。

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

我还检查了这个问题和答案如何从异步调用返回响应？但我仍然看不到如何在我的代码中插入他们正在谈论的回调。

有没有办法做到这一点？

这是我正在使用的 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>

标签： javascriptajaxasynchronous

解决方案

首先，就像 Robin Zigmond 评论的那样，您的脚本中有语法错误，这会阻止它工作。因此，如果您的脚本正在执行，您的担忧是正确的。脚本的最后一行应如下所示

})(jQuery);

（在结束括号和开始括号之间删除分号）

正如我在评论中已经提到的，你会在你的开发者控制台（大多数浏览器中的 F12）中注意到这些事情。您还将在那里看到 console.log 输出，这对于调试 javascript 非常方便。

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

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

推荐阅读