AJAX - 使用JavaScript的XMLHttpRequest和PHP

检索数据我想使用AJAX 一个形式上使用户不必离开当前页面提交自己的名字。当用户键入他们的名字时，我已经有了这个功能。它会在输入时自动更改。我正在努力的是onClick提交名称。我没有收到PHP文件的任何回应，我不知道为什么。这里是我的代码：AJAX - 使用JavaScript的XMLHttpRequest和PHP

的表单页面：（提交操作通过一个全局变量通过GET请求发送名称）

<script type="text/javascript"> 

//Decalre the variables of name as Global variable 
var name; 

    //For IE 5 + 6 
function httpReq(){ 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     return xmlhttp=new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     return xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
} 

function nameTest(str) { 
    if (str.length==0) { 
     document.getElementById("nameTest").innerHTML="Please enter your name."; 
     return; 
    } 
    httpReq(); 
    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      document.getElementById("nameTest").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET","nameTest.php?q="+str,true); 
    xmlhttp.send(); 
    return name = str; 
} 


// function to submit the users details to the database 
function submit(str) { 
    httpReq(); 
    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      document.getElementById("submitted").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET","mailing-list.php?name="+name, true); 
    xmlhttp.send(); 
} 
</script> 

    Name: <input type="text" onkeyup="nameTest(this.value)"> 
    <span id="nameTest">Please enter your name.</span> 
      <input style="width: 100px; height: 40px;" type="button" onclick="submit" value="Join!"> 
     <span id="submitted"></span>

的PHP页面不作回应（只回应一些简单的事情，直到我得到一个回应）：

<?php 

$name = $_GET["name"]; 

echo "Hello There " + $name; 

?>

似乎无法弄清楚为什么没有响应。任何帮助感谢！

来源

2013-05-13 Luke Turnbull

你'httpReq'是没有意义的，你这是新的对象，但你真的只是创建一个新的全局变量' xmlhttp'。我希望你不打算同时拨打多个电话。 – epascarello 2013-05-13 13:30:29

在PHP中，你使用'$ _GET [“name”]'，但是你使用的JavaScript的关键是'q'：？“q =”+ str' – Ian 2013-05-13 13:31:52

@epascarello httpReq只是在旧IE版本和其他浏览器在一个函数中拉出来，所以我不会这样做几次，我敢肯定这不是问题，因为nameTest部分工作正常。 – 2013-05-14 09:12:04

var name; 

    //For IE 5 + 6 
function httpReq(){ 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     return new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     return new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
} 

function nameTest(str) { 
    if (str.length==0) { 
     document.getElementById("nameTest").innerHTML="Please enter your name."; 
     return; 
    } 
    var xmlhttp = httpReq(); 
    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      document.getElementById("nameTest").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET","nameTest.php?name="+str,true); 
    xmlhttp.send(); 
    window.name = str; 
} 


// function to submit the users details to the database 
function submit() { 
    var xmlhttp = httpReq(); 
    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      document.getElementById("submitted").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET","mailing-list.php?name="+window.name, true); 
    xmlhttp.send(); 
}

您还没有为xmlhttp赋值，可能是控制台告诉您它未定义，您应该检查它。对不起，你的代码中有很多错误。我编辑它，你现在应该尝试。 submit（）不会得到参数，它只是从全局变量名（window.name）中获取名称，该名称由函数nameTest（str）设置。

最后一件事：你应该检查你想要的客户端和服务器端之间的兼容性。您在查询字符串中使用了“？q =”而不是“？name =”，请注意这些事情！

来源

2013-05-13 13:30:26

对不起，我没有指定，它的submit（）函数不起作用，我只显示了nameTest函数，因为那是我获得变量的地方提交函数的名称值 – 2013-05-14 09:15:17

所以你想nameTest“保存”将由submit（）用来检索数据的名称？ – 2013-05-14 14:22:04

函数submit（str）中的值“name”未知，因此为空。改成

xmlhttp.open（“GET”，“mailing-list.php？name =”+ str，true）;

，并调用你的函数是这样的：

submit("NameToShow");

BTW：使用jQuery将使这个很多更容易为你。

来源

2013-05-13 13:31:34 Borniet

根据LightStyle，您应该使用返回的httpReq()方法来检索您的requestObject。

var xmlhttp = httpReq(); 
    xmlhttp.onreadystatechange=function() {...}

您必须修改 onclick="submit" 到onclick="submit();"让它叫。

这PHP脚本将返回0，连接操作符是PHP .：

<?php 
$name = $_GET["name"]; 
echo "Hello There " . $name; 
?>

来源

2013-05-13 13:49:32 Marcassin

AJAX - 使用JavaScript的XMLHttpRequest和PHP

回答

相关问题