Vue JS Ajax 调用

Question

Vue JS Ajax 调用

Str*_*ger 2 ajax wordpress vue.js vue-resource

我正在尝试从 jQuery 更改为 Vue.js，但使用 vueresource 运行 Ajax 调用时遇到一些困难。下面是我正在使用的示例脚本，其中包含 jQuery 和 Vuejs。两者都尝试访问相同的 ajax 调用。jQuery 调用有效，vuejs 调用无效。正在调用 sendAjax 方法，因为前 2 个警报显示 - 然后什么也没有。

编辑 - 这只会在通过 Wordpress 运行 Ajax 调用时导致错误。在 WP 之外，它确实有效。有任何想法吗？？

<!DOCTYPE html>
<html>
    <head>
        <title>Vue Resource</title>

        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    </head>

    <body>
        <button id="jQueryAjax">Jquery AJAX</button>

        <div id="myvue"> 
            <button @click.prevent="sendAjax()">AJAX</button>
        </div>

        <script>
            let AjaxUrl = "http://localhost:8888/mySite/wp-admin/admin-ajax.php";
            const postData = { action: 'my_ajaxcall', function: 'AjaxTest' };

            Vue.use(VueResource);

            const ajax_app = new Vue({
                el: '#myvue',
                methods: {
                    sendAjax() {
                        alert("VueAjax");       
                        alert(JSON.stringify(postData));

                        this.$http.post(AjaxUrl, postData).then(res => {
                          alert(JSON.stringify(res));
                        });
                    }
                }
            });    

            $("#jQueryAjax").click(function() {
                alert("jQueryAjax");
                alert(JSON.stringify(postData));
                alert(AjaxUrl);

                $.ajax({
                    type: 'POST',
                    url: AjaxUrl,
                    data: postData,
                    dataType: 'json',
                    success: function(data) {
                        alert(JSON.stringify(data));
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert("Error");
                    }
                });
            });
        </script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

mbu*_*ann 6

您的 AJAX 调用可能会遇到错误，并且您只处理成功的调用。sendAjax请像这样扩展你的功能：

this.$http.post(AjaxUrl, postData).then(res => {
    alert(JSON.stringify(res));
}, err => {
    alert(err);
});

Run Code Online (Sandbox Code Playgroud)

现在应该发出错误警报。

顺便说一句：最好使用console.log()代替alert()，它更具可读性，并且您不必确认每个警报。

很高兴我能帮上忙。如果这确实有帮助，请接受或点赞。 (2认同)

归档时间：	6 年前
查看次数：	13653 次
最近记录：	6 年前