Question

我正在建立一个Q / A网站。当用户点击特定问题时，他将被重定向到用户可以发布答案的问题页面。

现在，问题是当用户点击“答案”链接时，很少有东西在后台处理，如更新数据库，发送邮件等。我试图在UI中显示一个加载指示器，但AJAX功能是没有被触发。

这是我的代码：

HTML：

<span id="msg"><img src="ajax-loader.gif"/></span>
<a id="sub-link" href="javascript:void(0)" onclick="loadAnswerList(document.getElementById('user-ans').value,<?php echo $qid; ?>,'<?php echo $posted_by; ?>')">Answer</a>

JS：

$(document).ajaxStart(function () {
    $('#msg').show();
}).ajaxStop(function () {
    $('#msg').hide();
});

AJAX请求

function loadAnswerList(ans,qid,postedBy,page)  {
    if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } 
    else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("ans_container").innerHTML = this.responseText;
        }
    };
    xmlhttp.open("GET","load_answers.php?ans="+ans+"&qid="+qid+"&postedBy="+postedBy+"&page="+page,true);
    xmlhttp.send();
}

我还尝试添加$（document）.ready（function（）{....}）;在ajax之上，但它仍然无法正常工作。我错过了什么吗？

使用jQuery版本3.2.1

Answer 1

jQuery不能与原生XMLHttpRequest对象一起使用。你正在使用的ajaxStart和ajaxEnd行处理它们的api。因此，为了使用它，您需要使用jQuery的.ajax()或.get()方法。

Answer 2

感谢您的详细信息。这是修改后的功能：

function loadAnswerList(ans,qid,postedBy,page)  {
var answer=ans;
var qstnid=qid;
var postby=postedBy;
var pg=page;

var request = $.ajax({
    type: "GET",
    url: "load_answers.php?ans="+ans+"&qid="+qid+"&postedBy="+postedBy+"&page="+page",
    data: {ans: answer, qid: qstn_id, postedBy: postby, page: pg},
    dataType: "html"
});

request.done(function(msg) {
  alert ( "Response: " + msg );
});

request.fail(function(jqXHR, textStatus) {
  alert( "Request failed: " + textStatus );
});

}

如果错了，请纠正我。还有一件事 - 我想在我之前的ajax请求中显示从php页面到特定div的响应。

document.getElementById("ans_container").innerHTML = this.responseText;

我在这里怎么做？

ajaxStart（）和ajaxStop（）函数没有被触发

2 个答案: