Question

我在5个月前问过用纯Javascript重写我的ajax调用。这里是原帖：https://stackoverflow.com/questions/35415812/need-help-to-rewrite-my-jquery-ajax-call-to-plain-javascript

我从未想过要完全重写脚本，因为它可以工作，但现在我需要将整个脚本重写为普通的js。我已经开始了。这是jQUery / JS组合：

    var cc = document.getElementsByClassName("cart-count");
    var wc = document.getElementsByClassName("wishlist-count");     
    var url = wp_ajax.ajax_url;
    var data = {
        action: 'get_counts'    
    };
    // JQUERY JS mixed VERSION
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        success: function (data) {
            var counts = JSON.parse(data);

            console.log(data);

            for(var i = 0; i < cc.length; i++){
                cc[i].innerText=counts["cartCount"];
            }
            for(var i = 0; i < wc.length; i++){
                wc[i].innerText=counts["wlCount"];
            }

        }
    });

控制台说：

    {"cartCount":"(1)","wlCount":"(3)"}

没错！

但现在我试图改写其余部分。这里是最新的：

    var cc = document.getElementsByClassName("cart-count");
    var wc = document.getElementsByClassName("wishlist-count");
    var url = wp_ajax.ajax_url;
    var data = {
        action: 'get_counts'    
    };
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
            if (xmlhttp.status == 200) {
                //document.getElementById("myDiv").innerHTML =     xmlhttp.responseText;
                var counts = data
                console.log(data);
                for(var i = 0; i < cc.length; i++){
                    cc[i].innerText=counts["cartCount"]; 
                }
                for(var i = 0; i < wc.length; i++){
                    wc[i].innerText=counts["wlCount"];  
                }

                console.log('done');

            } else if (xmlhttp.status == 400) {
                console.log('There was an error 400');
            } else {
                console.log('something else other than 200 was returned');
            }
        }
    };

    xmlhttp.open('POST', url, true);
    xmlhttp.send(data);

它不起作用。控制台没有给我价值，只有var：

    Object {action: "get_counts"}

我的问题/问题：如何在没有jQuery ajax的情况下获取数据操作值？请不要问“为什么不是jQuery？”。

感谢大家的帮助！抱歉我的英文。

更新：我懂了！

jQuery的：

 var data = {
    action: 'get_counts'    
 };

JS：

 url + '?action=get_counts'

Answer 1

添加此

var data = JSON.parse(xmlhttp.responseText);//you have to parse result

之前

            var counts = data
            console.log(data);

Answer 2

您没有评估AJAX响应数据，而是在AJAX调用之上设置的局部变量data：

var data = {
    action: 'get_counts'    
};

您需要解析AJAX响应：

if (xmlhttp.status == 200) {
    console.log( JSON.parse(xmlhttp.response) )
}

请参阅：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response

Answer 3

它的发生是因为Ajax是异步请求，浏览器在与处理代码的线程不同的线程中进行处理。通常，jquery和其他类似的框架都有为此定义的回调方法，但在纯JS实现中，您可以使用

xmlhttp.responseText

在请求完成后获取输出

我的jQuery Ajax调用纯Javascript

3 个答案: