Ajax 响应文本未在 javascript 中返回任何结果答案

【问题标题】：Ajax response text not returning any result in javascriptAjax 响应文本未在 javascript 中返回任何结果
【发布时间】：2015-11-28 22:37:35
【问题描述】：

我知道 ajax 很容易与 jquery 一起使用，但在这里我试图用核心 javascript 来理解 ajax，我将两个值 name 和 age 从 index.html 发送到 indexPhp.php，在控制台中它显示这条消息 @987654323 @ 但它在 div 中没有显示任何结果，这里是 html、js 和 php 脚本

<html>
<head>    
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="scripts.js"></script>
</head>        

<body>            
Name: <input type="text" id="name" name="name"><br><br>
Age:  <input type="text" id="age" name="age"><br><br>  
<button type="submit" value="Submit" onclick="showUser()">Submit</button>
<div id="resultDiv"></div>     
</body>        
</html>

Javascript

function showUser() {

var hr = new XMLHttpRequest();
var url= "indexPhp.php";   
var name= document.getElementById("name").value;
var age= document.getElementById("age").value;    

var vars = {Name: name, Age: age};

hr.open("POST",url,true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

hr.onreadystatechange = function(){

    if(hr.readyState == 4 && hr.status == 200){

        var return_data = hr.responseText;
        alert(hr.responseText);
        document.getElementById("resultDiv").innerHTML = return_data;
    }        
}
  hr.send(vars);

}

php 脚本

if(isset($_POST['name']) && isset($_POST['age'])){

echo  $name = $_POST['name'] . " " . $age = $_POST['age'];    

}

【问题讨论】：

您在hr.send(vars) 中使用的vars 参数应该是字符串，而不是对象：w3schools.com/ajax/ajax_xmlhttprequest_send.asp。这可能会导致错误。顺便问一下，你有没有检查你是否在服务器上收到了一些东西？
stackoverflow.com/questions/21884963/…

标签： javascript ajax

【解决方案1】：

你试过这样传递数据吗，

var vars = "Name="+name+"&Age="+age;

在您的代码中，您将数据作为对象发送。

【讨论】：

是的，我也这样做了，使用这种方式显示 url 中的值
hr.open("POST",url,true); hr.send(vars); 这不会在 url 中显示值

【解决方案2】：

这是我以前有时做的一个 ajax 函数。它既可以post也可以get，使用起来就像你使用jQuery的ajax一样。

function ajax(options, timeout){
    method = options.method || "POST";
    url = options.url || "#";
    (!timeout) ? timeout = 10000 : timeout = timeout * 1000; 
    var request, timedOut = false, xhrTooLong, datas = "";
    try{
        request = new XMLHttpRequest();
    } catch ( error ) {
        try {
            request = new ActiveXObject( "Microsoft.XMLHTTP" );
        } catch ( error ) {
            return true;
        }
    }
    if(options.data){
        for( dat in options.data){
            (datas == "")?datas+= (method.toLowerCase()=="get"?"?":"")+dat+"="+
               options.data[dat]:datas+="&"+dat+"="+options.data[dat];
        }
    }
    if(method.toLowerCase() == "get" && datas.length > 0)
        url = url + datas;
    request.open(method, url, true);
    request.onreadystatechange = function() {
        if( request.readyState == 1 ) {
            xhrTooLong = setTimeout(function(){
                if(request.readyState == 1){
                    timedOut = true;
                    request.abort();
                    if(options.aborted) options.aborted(true);
                }
            }, timeout);
        }
        if(request.readyState == 4 && !timedOut){
            window.clearTimeout( xhrTooLong );
            if(options.complete) options.complete (true);
            if ( /200|304/.test( request.status ) ) {
                if(options.success) options.success(request.responseText);
            } else {
                if(options.error) options.error(request.status);
            }
        }
    }
    request.setRequestHeader( 'If-Modified-Since', '06 Oct 1970 00:00:00 GMT' );
    if(method.toLowerCase() == "get"){
        request.send( null );
    } else {
        if(!options.contentType){
            request.setRequestHeader( 'Content-type','application/x-www-form-urlencoded; charset=UTF-8' );
        } else {
            request.setRequestHeader( 'Content-type',options.contentType );
        }
        request.setRequestHeader( 'Accepts', '*' );
        request.send( encodeURI( datas ) );
    }
    return false;
}

现在你可以像这样重写 showUser：

function showUser() {

    var url= "indexPhp.php";   
    var name= document.getElementById("name").value;
    var age= document.getElementById("age").value;

    var vars = {Name: name, Age: age};

    ajax({
        url: url,
        method: "post",
        data: vars,
        success: function(result){
            alert(result);
            document.getElementById("resultDiv").innerHTML = result;
        },
        error: function(){ alert("Failed!") },
        aborted: function(){ alert("Aborted!") },
        complete: function(){ alert("Complete!") }
    });

}

您还可以在关闭 ajax 调用中的函数大括号后在几秒钟内传入一个可选的超时。

【讨论】：