时间戳

首页 > 解决方案 > Vue JS Ajax 调用

ajax - Vue JS Ajax 调用

问题描述

我正在尝试将 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>

标签： ajaxwordpressvue.jsvue-resource

解决方案

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

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

现在应该警告一个错误。

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

推荐阅读