Vue JS Ajax 调用答案

【问题标题】：Vue JS Ajax CallsVue JS Ajax 调用
【发布时间】：2020-03-25 20:33:41
【问题描述】：

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

【问题讨论】：

标签： ajax wordpress vue.js vue-resource

【解决方案1】：

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

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

现在应该警告一个错误。

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

【讨论】：

谢谢。事实上，我现在收到一个错误：状态 400 - 错误请求。这看起来像问题。 "cache-control":[ "no-store, no-cache, must-revalidate" ], - 我会研究这意味着什么......
很高兴我能帮上忙。如果这真的有帮助，我们将不胜感激。

【解决方案2】：

@mbuechmann 指出我能够看到实际错误后，我能够确定我遇到的问题实际上与 Wordpress 有关。为了使用 Wordpress Ajax 处理程序，您需要向 REQUEST 标头发送一个操作。为此，您需要发送 FormData，并且不发送标头。

在这个问题中找到了这段代码：Custom Shortcode AJAX 400 Bad Request，它使我能够让我的 Fetch 与 Wordpress 一起工作。

var data = new FormData();

data.append( 'action', 'aj_ajax_demo' ); data.append( 'nonce', aj_ajax_demo.aj_demo_nonce );

fetch(aj_ajax_demo.ajax_url, {
    method: 'POST',
    body: data, }).then(response => {
    if (response.ok) {
        response.json().then(response => {
            console.log(response);
        });
    } });

【讨论】：