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

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

我還檢查了此問題和答案如何從異步調用返回響應？ 但是我仍然看不到如何在他們的代碼中插入他們正在談論的回調。

有辦法嗎？

這是我正在使用的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中顯示data 。 例如，您可以在想要在HTML中顯示消息的任何地方添加<div id="confirmationMessage"></div> 。 然后，您可以使用jQuery將文本放入DOM中，如下所示：

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

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

問題描述

2 個解決方案

解決方案1
0 2018-11-07 18:15:09

解決方案2
0 2018-11-07 18:15:12

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

問題描述

2 個解決方案

解決方案1 0 2018-11-07 18:15:09

解決方案2 0 2018-11-07 18:15:12

解決方案1
0 2018-11-07 18:15:09

解決方案2
0 2018-11-07 18:15:12