發布html表單觸發ajax請求，沒有JQuery

Question

我有一個舊的js代碼，可以在沒有JQuery的情況下很好地處理ajax請求：

function makeGetRequestTar(key) {
    http.open('GET', key, true);
    //assign a handler for the response
    http.onreadystatechange = processResponseTar;
    //actually send the request to the server
    http.send(null);
}

function processResponseTar() {
    if(http.readyState == 4){
        var response = http.responseText;
        document.getElementById('content').innerHTML = response;
    }
}

但是現在我想：

1. 提交html表單時觸發ajax請求

2. 通過'content'中document.getElementById('content').innerHTML作為變量。

3. 繼續使用JQuery

所以這是我現在的js代碼：

function makeGetRequestTar(fileTarget, htmlTarget) {

    http.open('GET', fileTarget, true);
    //assign a handler for the response
    http.onreadystatechange = processResponseTar(htmlTarget);
    //actually send the request to the server
    http.send(null);
}

function processResponseTar(htmlTarget) {
    if(http.readyState == 4){
        var response = http.responseText;
        document.getElementById(htmlTarget).innerHTML = response;
    }
}

而這里的HTML：

<div id="description-form">
    <form enctype="multipart/form-data" id="xxx" action="receiver.php" method="post" target="my-iframe">
        <textarea class="proposal" name="description" rows="10" cols="60"></textarea>
        <br>
        <input class="submitbutton" type="submit" onclick="return makeGetRequestTar('doc/description.txt','description-preview')" value=" Save text " />
        <br>
        <iframe name="my-iframe" style="display:none"></iframe>
    </form>
</div>
<div id="description-preview" style="float:left">
    <?php include("doc/description.txt")?>
</div>

此代碼不會在控制台上引發任何錯誤。 並通過php正確發布了表單。

但是ajax請求不起作用，如果沒有錯誤顯示，為什么它不起作用？

Answer 1

問題在於您正在執行功能processReponse ：

http.onreadystatechange = processResponse(htmlTarget);

並將該函數的RESULT（在這種情況下是undefined ）分配給http.onreadystatechange 。

現在，當readystate更改時， XMLHttpRequest嘗試調用現在undefined onreadystatechange ，因此什么也沒有發生。

嘗試這個：

function processResponseTar(htmlTarget) {
    return function () {
        if(http.readyState == 4){
            var response = http.responseText;
            document.getElementById(htmlTarget).innerHTML = response;
        }
    }
}

現在，您仍將函數的結果分配給http.onreadystatechange ，但這一次它是一個可調用的函數，而不是undefined 。

Answer 2

您的舊代碼

http.onreadystatechange = processResponseTar;

將回調函數 processResponseTar 分配給 onreadystatechange事件屬性。

新密碼

http.onreadystatechange = processResponse(htmlTarget);

調用您的回調 （注意(..) ）。 您無法將自定義參數添加到該回調中。 使htmlTarget可被回調訪問的一種方法是：

function makeGetRequestTar(fileTarget, htmlTarget) {
    http.open('GET', fileTarget, true);
    //assign a handler for the response
    http.onreadystatechange = function() {
        processResponseTar(htmlTarget);
    };
    //actually send the request to the server
    http.send(null);
}

Answer 3

首先，您的http是未定義的，您需要對其進行定義。 其次，您正在調用processResponse函數，但函數名稱為processResponseTar 。

編輯：

<script>
    var http;
    function makeGetRequestTar(fileTarget, htmlTarget) {
        if(window.XMLHttpRequest){
            http=new XMLHttpRequest();    // code for IE7+, Firefox, Chrome, Opera, Safari
        }else{
            http=new ActiveXObject("Microsoft.XMLHTTP");   // code for IE6, IE5
        }
        http.open('GET', fileTarget, true);
        //assign a handler for the response
        http.onreadystatechange = processResponseTar(htmlTarget);
        //actually send the request to the server
        http.send(null);
    }

    function processResponseTar(htmlTarget) {
        return function () {
            if(http.readyState == 4 && http.status==200){
                var response = http.responseText;
                document.getElementById(htmlTarget).innerHTML = response;
            }
        }
    }
</script>