Question

我知道这个问题可能已被问过多次，但我一直在努力了解javascript如何处理这些类型的请求。

重新输入下面的代码-我知道它已经通过测试并且可以正确更新数据库了。

function post_ajax(url, token, data) {

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.readyState)
            //console.log("ALL OK")
            //console.log(this.responseText)
            //return this.responseText
        } else {
            console.log(this.readyState)
            //console.log(this.status)
            //console.log(this.statusText)
            //return this.responseText
        }
    };
    console.log("open")
    xhttp.open("POST", url, true)
    console.log("set request")

    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    xhttp.setRequestHeader("Authorization", "Bearer " + token)
    console.log("send")
    xhttp.send("reply_json=" + JSON.stringify(data))
    console.log("done")

}

我有几个问题。

1）控制台显示此输出，当我只需要运行一次时，它看起来就像多次运行。这个输出正确吗？它实际上运行了多次吗？

open
functions.js:19 1
functions.js:27 set request
functions.js:31 send
functions.js:33 done
functions.js:19 2
functions.js:19 3
functions.js:14 4
functions.js:25 open
functions.js:19 1
functions.js:27 set request
functions.js:31 send
functions.js:33 done
functions.js:19 2
functions.js:19 3
functions.js:14 4
functions.js:25 open
functions.js:19 1
functions.js:27 set request
functions.js:31 send
functions.js:33 done
functions.js:19 2
functions.js:19 3
functions.js:14 4
functions.js:25 open
functions.js:19 1
functions.js:27 set request
functions.js:31 send
functions.js:33 done
functions.js:19 2
functions.js:19 3
functions.js:14 4
functions.js:25 open
functions.js:19 1
functions.js:27 set request
functions.js:31 send
functions.js:33 done
functions.js:19 2
functions.js:19 3
functions.js:19 4

2）当this.status == 200和this.readystate == 4时，如何获取post_ajax返回this.responseText？

编辑：下面是对post_ajax的调用-我将“ div / span”元素更改为“ input”元素，以便用户可以更改其帖子。

我将所需的信息存储在元素的ID标记中，并将其提取到JSON中，以便长时间与字段中的文本一起传递给服务器。

然后，一旦服务器确认请求已接受，我将更新数据库并将其更改回“ div”。

function change_reply_to_text(ele_name) {
    // split id of the edit button to get the reply_id - post_id
    const split = ele_name.split("-")
    // get element
    var txt_reply_element = document.getElementById(split[0] + "-" + split[1] + "-" + split[2])
    // store text
    const txt_value = txt_reply_element.value

    // get button element and retrieve token for api call
    var btn_ele = document.getElementById(split[0] + "-" + split[1] + "-" + split[2] + "-edit")
    const token = btn_ele.getAttribute("token")

    // test post the ajax form
    var response = post_ajax("/api/post/update", token, get_json_from_id(btn_ele.id, txt_value))

    // create new item replacing textbox with P element
    var reply_text_p = document.createElement("p")
    // set text and formatting
    reply_text_p.innerText = txt_value
    reply_text_p.id = txt_reply_element.id
    reply_text_p.className = "article-content ow-break-word"
    // replace both
    txt_reply_element.parentNode.replaceChild(reply_text_p, txt_reply_element)

    // change button from "Edit" to "Save"
    var new_btn = document.getElementById(split[0] + "-" + split[1] + "-" + split[2] + "-" + "edit")
    new_btn.innerText = "Edit"

    // change on click back so element can now be editied again
    new_btn.onclick = function () {
        change_text_to_reply(this.id)
        //update_reply(this)
    }
}

这时我想访问响应，以便我确定是否可以继续进行。

// test post the ajax form
var response = post_ajax("/api/post/update", token, get_json_from_id(btn_ele.id, txt_value))

Javascript XMLHttprequest-获取响应

0 个答案: