php - 这个 JavaScript 函数到底是做什么的？我如何捕获 select 中的值并将其插入回数据库？

Question

我正在寻找一个可以使用 PHP 填充三重下拉列表的 ajax 脚本。我遇到了这段代码，尽管代码运行得很好，但我想知道幕后实际发生的情况，因为我是 AJAX 或 JavaScript 的新手，我无法理解下面的函数到底是做什么的。这是代码:

<script language="javascript" type="text/javascript">

function getXMLHTTP() { //function to return the xml http object
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }

        return xmlhttp;
    }

    function getState(countryId) {      

        var strURL="findState.php?country="+countryId;
        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('statediv').innerHTML=req.responseText;                     
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }       
    }
    function getCity(stateId) {     
        var strURL="findCity.php?state="+stateId;
        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('citydiv').innerHTML=req.responseText;                      
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }

    }
</script>

这是来自 finsState.php 的代码

<?php
$countryId=intval($_GET['country']);
$host = "localhost";
$username = "username";
$password = "password";
$database = "test";
$connection = mysql_connect($host,$username,$password) or die(mysql_error());
$database = mysql_select_db($database) or die(mysql_error());
$query = "SELECT * FROM states WHERE country_id = ".$countryId;
$result = mysql_query($query) or die(mysql_error());
?>
<select name="states" onchange="getCity(this.value)">
<option>Select State</option>
<?php while($row = mysql_fetch_array($result)) { ?>
    <option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
<?php } ?>
</select>

这是 findCity.php

<?php
$stateId=intval($_GET['state']);
$host = "localhost";
$username = "username";
$password = "password";
$database = "test";
$connection = mysql_connect($host,$username,$password) or die(mysql_error());
$database = mysql_select_db($database) or die(mysql_error());
$query = "SELECT * FROM cities WHERE state_id = ".$stateId;
$result = mysql_query($query) or die(mysql_error());
?>
<select name="city">
<option>Select City</option>
<?php while($row = mysql_fetch_array($result)) { ?>
    <option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?> </option>
<?php } ?>
</select>

我的问题:

a) 谁能总结一下第一个、第二个和第三个 JavaScript 函数以及它如何从 findState.php 和 findCity.php 中选择所有值

b) 如果我要捕获用户选择的 stateId 和 CityId 的值，我该怎么做。因为列表是从 JavaScript 填充的，所以我无法从 PHP 捕获值 ($_POST['state'])。

Answer 1

第一个功能是尝试打开 XML HTTP 请求，允许客户端脚本与服务器大小的脚本进行交互。由于不同的浏览器对此的处理方式不同，因此 try在尝试现代 IE 实现、较旧的 IE 实现并最终放弃之前，请使用标准方法。

后两个的作用大致相同。他们定义希望与之交互的脚本并使用第一个函数进行连接。如果连接成功，它会使用 HTTP GET 请求发送信息(传统上 GET 用于获取信息，POST 用于设置信息)。 当使用 XmlHttpRequest 发送信息时，onreadystatechange事件在连接期间的关键点触发并提供对 readyState 的访问(指如何请求阶段)和status这是一个标准的服务器响应(您可能熟悉“404”，意思是“找不到文件”)。 “200”状态意味着“一切都很好”，因此当收到该状态时，脚本知道它可以根据所提供的信息采取行动。任何其他响应都会创建一个弹出窗口，告诉用户出了什么问题。

如果没有看到该脚本与之交互的实际页面，我不知道获取 stateId 和 CityId 的最佳方法。据猜测，它们将是按下某个按钮时输入的值。如果是这种情况，类似下面的代码就可以做到这一点:

document.getElementById('id-of-submit-button').onclick = function() {
    var stateId = document.getElementById('id-of-stateid-input').value,
        CityId  = document.getElementById('id of cityid-input').value;
};