发布触发ajax请求的html表单NO JQuery - Post html form triggering ajax request NO JQuery

我有一个旧的js代码，可以很好地处理ajax请求，而不需要JQuery:

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;
    }
}

但现在我想：

提交html表单时触发ajax请求
将document.getElementById('content').innerHTML中的'content'作为变量传递。
在没有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请求不起作用，如果没有显示错误，为什么它不起作用？

您的旧代码

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);
}

问题是正在执行函数processReponse此处：

http.onreadystatechange = processResponse(htmlTarget);

并将该函数的RESULT（在这种情况下是undefined）分配给http.onreadystatechange。

现在，当readystate发生变化时，XMLHttpRequest会尝试调用onreadystatechange，也就是现在的undefined，所以什么也没发生。

试试这个：

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

现在，您仍然将函数的结果分配给http.onreadystatechange，但这次它是一个可调用的函数，而不是undefined。

首先，您的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>