Vue JS Ajax Calls

Question

I am trying to make the change from jQuery to Vue.js and am having some difficulty running an Ajax Call using vueresource. Below is a sample script I am using, with both jQuery and Vuejs. Both trying to access the same ajax call. The jQuery call works, the vuejs call doesn't. The sendAjax method is being called because the first 2 alerts show - then nothing.

Edit - this is only causing an error while running the Ajax call through Wordpress. Outside of WP, it does work. Any ideas??

<!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>

score 6 · Answer 1 · answered Nov 30 '19 at 17:20

6

You AJAX call probably encounters an error and you handle only the successful calls. Please extend your sendAjax function like this:

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

Now an error should be alerted.

BTW: It is better to use console.log() instead of alert(), it is much more readable and you won't have to confirm every alert.

answered Nov 30 '19 at 17:20

mbuechmann

5,413
5
27
40

Thank you. Indeed I am now receiving an error : status 400 - Bad Request. This looks like the problem. "cache-control":[ "no-store, no-cache, must-revalidate" ], - I will research what this means...... – StripyTiger Nov 30 '19 at 17:31
2

Glad I could help. If this really was helpful an accept or an upvote would be appreciated. – mbuechmann Dec 01 '19 at 09:57

score 1 · Answer 2 · answered Dec 01 '19 at 12:33

After @mbuechmann pointing me to be able to see the actual error, I was able to determine that the issue I was having was actually to do with Wordpress. In order to use the Wordpress Ajax handler, you need to send an action to the REQUEST header. To do this, you need to send FormData, and without sending headers.

This code was found in this question : Custom Shortcode AJAX 400 Bad Request and enabled me to get my Fetch working with 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);
        });
    } });

Vue JS Ajax Calls

2 Answers2