如何使用香草JavaScript（ES6）处理ajax请求？

到目前为止，我的想法是：在控制台中，我没有得到任何要打印的日志；虽然也没有错误。我的目标是用香草javascript（ES6）处理一个ajax请求（以后多次）

以下是我的网站

。/options…

文件的外观：

{"acf":{"1yr_short_copy":"<p>Our 1 Year Money Back Guarantee either leaves you 100% satisfied,....

{“acf”：{“1年期短拷贝”：“我们的1年退款保证要么让您100%满意，。。。。

---

例如，我只想抓取字段

1yr\u short\u copy

文本数据并打印到html div中。我知道使用jQuery非常简单；但我无法在当前应用程序中使用jQuery——所以我正在寻求一种普通的ES6技术。有什么想法吗？

您可能想使用

onsuccess

方法。这是f XMLHttpRequest类，该类在响应启动后工作

const text = document.querySelector("#paragraph")

xobj.onsuccess = () => {
    const response = JSON.parse(xobj.responseText);
    text.textContent = response.acf.1yr_short_copy;
}

你也可以这样做

async function ajaxRequest(id) {
  const response = await fetch(`url/${id}`, options); //here is where you do a ajax call
  const json = await response.json(); // here you manage the response

  return json;
}

---

缺少对象的一半；）注意，这是一个同步例程。到目前为止，您无法使用post进行这种类型的调用。异步可以工作，但会变得复杂。这将从服务器获取任何类型的文件。我在一个小模板引擎中使用它来包含html面包屑或更多模板ync功能将是一场噩梦

function axget(url) {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState === 4 && this.status === 200) {
                        // Typical action to be performed when the document is ready:
                        return this.responseText;
                    }
                }
                ;
                // the false below means synchron and works only together with GET 
                xhttp.open("GET", url, false); 
                xhttp.send();

                // by a synchrone funtion we can get the result here
                var src = xhttp.responseText
                if (src === "") {
                    console.log("ERROR AXGET: INVALID OR EMPTY ! " + url);
                }
                return src;
            }

但我只能猜测，这正是您可能需要的：）但请注意，这将阻止，直到此函数得到服务器的答案

在异步中也是如此

        //writes something inside the document 
        function simplewriter() {
            console.log("Hi i am here !!!!");
            doc = new DOMParser().parseFromString(this.responseText, "text/html");
            document.getElementById(this.id).innerHTML = doc.body.innerHTML;
            this.onload = "";
        }
    //inputdata means some kind for serialized input from a form for example  
    function axg(
                  url, //should be clear
                  inputdata, //serialized datat to be processed by php or whatever
                  execfunc, // the callback function
                  method, //get or post
                  async)  // should be set to true  - its just for testing here
            {
            if (typeof url === 'undefined') {
                return;
            }
            if (typeof async === 'undefined') {
                async = true;
            }
            if (typeof method === 'undefined') {
                method = "GET";
            }
            if (typeof data === 'undefined') {
                inputdata = "";
            }

            xhr = new XMLHttpRequest();
            if (typeof execfunc !== 'undefined') {
                 // here we have to provide a callback function
                 // e.g. the simple writer for example  
                xhr.onload = execfunc.bind(xhr);
            } else {
                return xhr.responseText;
            }
            if (method !== "POST") {
                xhr.open("GET", url, async);
            } else {
            xhr.open("POST", url);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(inputdata, async);
            }
        }

代码将毫不延迟地继续，并且看起来这个函数不在那里。这就是为什么需要回调。迟早在服务器应答时，这个回调函数将被调用。但这也意味着它将中断您的串行代码流。在服务器应答之前，您将看不到任何结果。想象一下我如果你想依靠异步函数的回答…回调噩梦。 这就是为什么我不在我的简单模板系统上使用它的原因

---

玩得开心点：）

如果你想使用

responseText

，你需要将

xobj

上的

responseType设置为
text
。如果你想在
xobj.response
中获取JavaScript对象，而不必使用
json.parse
。请参见。但是，你可能需要考虑使用
json
nstead.是的，如果您不担心IE兼容性，请使用。您是否尝试过在postman中进行测试？我无法从您的服务器获得响应。没有400，没有500，没有身份验证错误，只是完全禁止。@HereticMonkey谢谢；这很有意义。您的确切意思是什么？您在阅读响应之前的某个时间设置了
responseType
。我通常是这样做的当我设置MIME类型头时，我可以这样做，因为它们在我的头中是相关的。谢谢；我已经用下面的异步函数ajaxRequest（id）{const response=await fetch（
https://www.website.com/wp-json/acf/v3/options/options/${id}
，options）；//这里是执行ajax调用const json=wait response.json（）的地方；//这里您管理的响应返回json；console.log（json）；}}）；--控制台日志中没有任何输出。@CaptainRon您的URL中没有id，所以不要添加它。Joaquin不太愿意修改他的示例以适应您的用例。例如，我给出了另一种方法来执行ajax调用（使用fetch），我也不太明白你说的话。对不起
        //writes something inside the document 
        function simplewriter() {
            console.log("Hi i am here !!!!");
            doc = new DOMParser().parseFromString(this.responseText, "text/html");
            document.getElementById(this.id).innerHTML = doc.body.innerHTML;
            this.onload = "";
        }
    //inputdata means some kind for serialized input from a form for example  
    function axg(
                  url, //should be clear
                  inputdata, //serialized datat to be processed by php or whatever
                  execfunc, // the callback function
                  method, //get or post
                  async)  // should be set to true  - its just for testing here
            {
            if (typeof url === 'undefined') {
                return;
            }
            if (typeof async === 'undefined') {
                async = true;
            }
            if (typeof method === 'undefined') {
                method = "GET";
            }
            if (typeof data === 'undefined') {
                inputdata = "";
            }

            xhr = new XMLHttpRequest();
            if (typeof execfunc !== 'undefined') {
                 // here we have to provide a callback function
                 // e.g. the simple writer for example  
                xhr.onload = execfunc.bind(xhr);
            } else {
                return xhr.responseText;
            }
            if (method !== "POST") {
                xhr.open("GET", url, async);
            } else {
            xhr.open("POST", url);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(inputdata, async);
            }
        }