Текст ответа Ajax не возвращает никакого результата в javascript

Я знаю, что ajax прост в использовании с jquery, но здесь я пытаюсь понять ajax с помощью основного javascript, я отправляю два значения name и age из index.html в indexPhp.php , В консоли он показывает это сообщение XHR finished loading: POST "http://localhost:8080/delPro/indexPhp.php"., но она не показывает никакого результата в DIV, вот HTML, JS и PHP скриптТекст ответа Ajax не возвращает никакого результата в javascript

<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'];  

}

источник

2015-09-03 mohsin

Параметр 'vars', который вы используете в' hr.send (vars) ', должен быть строкой, а не объектом: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp. Это может привести к ошибке. Кстати, вы проверяли, получаете ли вы что-то на сервере? – LostMyGlasses

http://stackoverflow.com/questions/21884963/how-to-submit-this-form-using-ajax-without-jquery-but-pure-javascript – rahul

Вы пробовали передавая данные, как это,

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

В своем коде вы отправляете данные как объект.

источник

2015-09-03 07:55:23 Ace

да, я сделал этот путь также, используя этот способ, это показывает значения в url – mohsin

'hr.open (« POST », url, true); hr.send (vars); 'Это не отображает значение в URL-адресе – Ace

Описание функции ajax, которую я делал иногда назад. Он может выполнять как пост, так и получать, а использование так же, как и использование 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.

источник

2015-09-03 10:39:16

Текст ответа Ajax не возвращает никакого результата в javascript

ответ

Смежные вопросы