2017-01-31 2 views
0

Ich bin auf meinen ersten Schritten mit Ajax. Könnte mir jemand bitte helfen zu verstehen, warum der Ajax send() die Adressleiste nicht aktualisiert? Die Verbindung funktioniert, aber es druckt immer "Es gibt keine Variable!" PS: Bitte beachten Sie, dass ich JQuery NICHT verwenden möchte.ajax send() aktualisiert die Adressleiste nicht

test.htm

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
<div id="posts"></div> 

<script type="text/javascript"> 
    var addressVariables = "sendvariable=test"; 
    var hr = new XMLHttpRequest(); 
    var url = "phpAjax.php"; 
    hr.open("GET", url, true); 
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    hr.onreadystatechange = function() { 
     if (hr.readyState == 4 && hr.status == 200) { 
      var returnData = hr.responseText; 
      document.getElementById("centreSection").innerHTML = returnData; 
     } 
    }; 
    hr.send(addressVariables); 
</script> 

<section id="centreSection"></section> 
</body> 

</html> 

phpAjax.php

<?php 
if (isset($_GET['sendvariable'])){ 
    $testVar = $_GET['sendvariable']; 
    echo "Ajax rocks !"; 
    echo $testVar; 
} else { 
    echo "There is no variable!"; 
} 

Antwort

0

Sie den Artikel über Ajax lesen können: http://www.w3schools.com/js/js_ajax_http_send.asp wird es Ihnen helfen, zu lernen, wie um eine Anfrage an einen Server zu senden Jetzt können Sie den Kabeljau versuchen e folgende unten (test.htm):

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
<div id="posts"></div> 

<script type="text/javascript"> 
    var addressVariables = "sendvariable=test"; 
    var hr = new XMLHttpRequest(); 
    var url = "phpAjax.php"+'?'+addressVariables; 
    hr.open("GET", url, true); 
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    hr.onreadystatechange = function() { 
     if (hr.readyState == 4 && hr.status == 200) { 
      var returnData = hr.responseText; 
      document.getElementById("centreSection").innerHTML = returnData; 
     } 
    }; 
    hr.send(); 
</script> 

<section id="centreSection"></section> 
</body> 
</html> 
+0

CSS.cutter vielen Dank es funktioniert. – Swartz

0

Das hier geht es ganz einfach, mit GET die send() Funktion keine Parameter verlangt hat. Die Parameter gelten nur für POST-Anfragen.

Um GET-Variablen an das PHP-Skript zu übergeben, müssen Sie sie an die URL anhängen, ähnlich wie im Beispiel des css.cutters im Browser. Die Spezifikation für XMLHttpRequest's finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send und das erklärt die Menge!

0

Problem mit Ihnen Code ist, dass Sie POST Funktionalität anstelle von GET Methode Funktionalität verwenden.

In GET Methode senden Sie Daten in URL selbst. Und was Sie tun, sendet es als eine POST Methode Stil.

Ihr Skript sollte wie unten sein:

<script type="text/javascript"> 

    var addressVariables = "sendvariable=test"; 

    var hr = new XMLHttpRequest(); 

    var url = "phpAjax.php?"+addressVariables; 

    hr.open("GET", url, true); 

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

    hr.onreadystatechange = function() { 

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

      var returnData = hr.responseText; 

      document.getElementById("centreSection").innerHTML = returnData; 
    } 
    }; 

    hr.send(); 

</script> 
Verwandte Themen