Question

我尝试在表单上使用 AJAX ，这样用户就不必离开当前页面来提交他们的名字。当用户输入他们的名字时，我有了工作的功能;它在打字时会自动更改。我正在努力的是提交名称的 onClick 。我没有收到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;

?>

似乎无法弄清楚为什么没有回应。任何帮助表示赞赏！

Answer 1

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（）没有得到params，它只是从全局变量名（window.name）中获取名称，该名称由函数nameTest（str）设置。

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

Answer 2

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

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

你必须修改 onclick="submit" 进入onclick="submit();"进行调用。

这个PHP脚本将返回0，串联运算符在PHP中为.：

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

Answer 3

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

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

并按照以下方式调用您的函数：

submit("NameToShow");

BTW：使用jQuery可以让你更轻松。

AJAX - 使用JavaScript XMLHttpRequest和PHP检索数据

3 个答案: