Question

我有一个旧的js代码可以正常处理没有JQuery的ajax请求：

var func = function () { 

    setTimeout( function(){
      $('#rotator').css("background-image", "url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/diamond_upholstery.png)"); 
    },2000);

    setTimeout( function(){
      $('#rotator').css("background-image", "url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/subtle_stripes.png)"); 
    },2000);

    setTimeout( function(){
      $('#rotator').css("background-image", "url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/struckaxiom.png)"); 
    },2000);

    setTimeout( function(){
      $('#rotator').css("background-image", "urlhttp://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/dark_stripes.png)"); 
    },2000);

    setTimeout(func, 0);

}
setTimeout(func, 0);

但现在我想：

提交html表单时触发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; } }中的'content'作为变量传递。
继续没有JQuery

所以现在这是我的js代码：

document.getElementById('content').innerHTML

这里是html：

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

此代码不会在控制台上引发任何错误。表格通过php正确发布。

但是ajax请求不起作用，如果没有显示错误，为什么它不起作用？

Answer 1

问题是你在这里执行函数processReponse：

http.onreadystatechange = processResponse(htmlTarget);

并将该函数的结果（在本例中为undefined）分配给http.onreadystatechange。

现在，当状态发生变化时，XMLHttpRequest会尝试调用现在为onreadystatechange的{{1}}，所以没有任何反应。

试试这个：

undefined

现在，您仍然将函数的结果分配给function processResponseTar(htmlTarget) { return function () { if(http.readyState == 4){ var response = http.responseText; document.getElementById(htmlTarget).innerHTML = response; } } }，但这次它是一个可调用的函数，而不是http.onreadystatechange。

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

首先，您的try { result = a / b; } catch (DivideByZeroException) { result = 0; }未定义，您需要定义它。其次，您正在调用http函数，但函数名称为processResponse。

<强>编辑：

processResponseTar

发布html表单触发ajax请求NO JQuery

3 个答案: