Ajax响应文本在javascript中不返回任何结果_Javascript_Ajax

Ajax响应文本在javascript中不返回任何结果

javascript ajax

Ajax响应文本在javascript中不返回任何结果,javascript,ajax,Javascript,Ajax,我知道ajax很容易与jquery一起使用，但在这里我试图通过核心javascript理解ajax，我将两个值name和age从index.html发送到indexPhp.php，在控制台中它显示以下消息XHR finished loading:POST”http://localhost:8080/delPro/indexPhp.php“但它在div中没有显示任何结果，这里是html，js和php脚本 <html> <head> <link rel="sty

我知道ajax很容易与jquery一起使用，但在这里我试图通过核心javascript理解ajax，我将两个值name和age从index.html发送到indexPhp.php，在控制台中它显示以下消息

XHR finished loading:POST”http://localhost:8080/delPro/indexPhp.php“

但它在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>

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

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

}

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>

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

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

}

你试过这样传递数据吗

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

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

这里是我以前做的一个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调用中关闭函数括号后以秒为单位传入可选超时。

在

hr.send（vars）

中使用的

vars

参数应该是字符串，而不是对象：。这可能会导致错误。顺便问一下，你有没有检查你是否在服务器上收到了一些东西？是的，我也是这样做的，用这种方式它在url

hr.open（“POST”，url，true）中显示值；人力资源发送（vars）这不会在url中显示值