javascript - 在 PHP 和 JavaScript 之间传递变量

Question

这个问题已经有答案了:

What is the difference between client-side and server-side programming? (3 个回答)

已关闭 9 年前。

我正在构建一个带有国家、州和城市下拉框的表单。我让表格可以工作，但不喜欢它存储数据的方式，我希望它存储国家、城市、州的名称，而不是引用每个城市、州、国家的 ID 号。在此示例中，顶部的一组框是新样式，不起作用，底部的框是旧样式。

http://heretomeet.com/ItineraryEntryPub.php

除了 getCity() 之外，该表单几乎可以工作。函数需要一个数字变量，并且不接受像“USA”这样的字符串。

getCity()函数是通过 findState.php 中“状态”下拉框的更改来调用的。我已经对代码进行了足够的调试，知道是“countryA”而不是“state”给我带来了问题，但无法弄清楚为什么。我在 findState.php 中使用 $test 变量来测试这一点，将其替换为 ?当我这样做时getCity()跑了。

主页:

$query = "SELECT country FROM country";
$result = mysql_query($query);
$query1 = "SELECT * FROM country";
$result1 = mysql_query($query1);

<script language="javascript" type="text/javascript">
    function getXMLHTTP() {
        //fuction 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?countryA=" + 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;
                        document.getElementById('citydiv').innerHTML = '<select name="city">' + '<option>Func City</option>' + '</select>';
                    } else {
                        alert("Problem while using XMLHTTP:\n" + req.statusText);
                    }
                }                
            }            
            req.open("GET", strURL, true);
            req.send(null);
        }
    }

    function getCity(countryId, stateId) {
        var strURL = "findCity.php?countryA=" + countryId + "&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("Problem while using XMLHTTP:\n" + req.statusText);
                    }
                }                
            }            
            req.open("GET", strURL, true);
            req.send(null);
        }
        alert ("End Get City");        
    }

    function getStateDest(countryId1) {
        var strURL="findStateDest.php?country=" + countryId1;
        var req = getXMLHTTP();

        if (req) {
            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {
                        document.getElementById('statedivdest').innerHTML = req.responseText;
                        document.getElementById('citydivdest').innerHTML = '<select name="dest_city">' + '<option>Destination City</option>' + '</select>';
                    } else {
                        alert("Problem while using XMLHTTP:\n" + req.statusText);
                    }
                }
            }
            req.open("GET", strURL, true);
            req.send(null);
        }        
    }

    function getCityDest(countryId1,stateId1) {
        var strURL = "findCityDest.php?country=" + countryId1 + "&state=" + stateId1;
        var req = getXMLHTTP();

        if (req) {
            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('citydivdest').innerHTML = req.responseText;
                    } else {
                        alert("Problem while using XMLHTTP:\n" + req.statusText);
                    }
                }                
            }            
            req.open("GET", strURL, true);
            req.send(null);
        }
    }
</script>
<script>
    $(function() {
        $( "#arrival" ).datepicker({ dateFormat: "yy-mm-dd" });
    });

   $(function() {
        $( "#ret" ).datepicker({ dateFormat: "yy-mm-dd" });
    });
</script>

</head>
<body>
<div class="container">
<div class="content">

<div id="schedform" style="position:relative; display:inline; width:440em; margin:auto; left:12.25em; top:3em; ">
    <form method="post" action="" name="schedform" id="ajax-contact-form">
        <center>
            <h1> <font color="#FFFF33"/>Itinerary Entry<font color="#ffffff"/><font face="Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif"/> </h1>
            <input class="textbox" type="text" name="username" placeholder="UserName" value="$user_name" />
            <!--<input class="textbox" type="text" name="trav_type" value="" placeholder="Business or Pleasure?" />-->
            <input type="radio" name="business" id="business" value="1"<?php if ($_POST['business'] == 'business') echo '1'; ?>/>Business
            <input type="radio" name="pleasure" id="pleasure" value="1"<?php if ($_POST['pleasure'] == 'pleasure') echo '1'; ?>/>Pleasure</br>
            </br>

            <select name="country" onChange="getState(this.value)" style="display:inline;">
                <option value="">Current Country</option>
                <?php while ($row=mysql_fetch_array($result)) { ?>
                    <option value=<?php echo $row['country']?>><?php echo $row['country']?></option>
                <?php } ?>
            </select>

            <div id="statediv" style="display:inline;">
                <select name="state">
                    <option>Form State</option>
                </select>
            </div>

            <div id="citydiv" style="display:inline;">
                <select name="city">
                    <option>Form City</option>
                </select>
            </div>

            <input class="textbox" style="display:inline;" type="text"  id="arrival"           name="arrival" value="" placeholder="Departing On" /></br>

            <select name="dest_country" onChange="getStateDest(this.value)" style="display:inline;">
                <option value="">Destination Country</option>
                <?php while ($row=mysql_fetch_array($result1)) { ?>
                    <option value=<?php echo $row['id']?>><?php echo $row['country']?></option>
                <?php } ?>
            </select>

            <div id="statedivdest" style="display:inline;">
                <select name="dest_state"; >
                    <option>Destination State</option>
                </select>
            </div>

            <div id="citydivdest" style="display:inline;">
                <select name="dest_city";>
                    <option>Destination City</option>
                </select>
            </div>

            <input class="textbox" style="display:inline; type="text"  id="ret" name="ret" value="" placeholder="Returning On" /><br />
            <textarea class="textbox2" name="details" rows="3" cols="25" placeholder="Anything Else You Want to Add..."></textarea><br />
            <input class="button" type="submit" value="Done" />

        </center>
    </form>
</div>
<!-- End Div Vista  --></div>

findCity.php:

<?php
    $countryId = $_GET['countryA'];
    $stateId = $_GET['state'];
    $con = mysql_connect("blah,blah");
    if (!$con) {
        die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('heretome_oxwa665');

    $query="SELECT city FROM city WHERE cont='$countryId' AND st='$stateId'";
    $result=mysql_query($query);
?>
<select name="city">
    <option>PHP City</option>
    <?php while($row=mysql_fetch_array($result)) { ?>
        <option value=<?php echo $row['city']?>><?php echo $row['city']?></option>
    <?php } ?>
</select>

findState.php:

<?php 
    $country = $_GET['countryA'];
    $test = 9999;
    $con = mysql_connect("blah,blah");
    if (!$con) {
        die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('heretome_oxwa665');

    $query="SELECT statename FROM states WHERE cont='$country'";
    $result=mysql_query($query);
?>
<select name="state" onchange="getCity(<?php echo $country?>,this.value)">
    <option>PHP State</option>
    <?php while ($row=mysql_fetch_array($result)) { ?>
        <option value=<?php echo $row['statename']?>><?php echo $row['statename']?></option>
    <?php } ?>
</select>

Answer 1

试试这个:

<select name="state" onchange="getCity(<?php echo $country?>,this.value)">

应该是:

<select name="state" onchange="getCity('<?php echo $country?>',this.value)">

在您的页面上here如果我在使用下拉菜单时检查它，我会收到一个关于 USA 未定义的 javascript 错误，这是因为您将 $country 作为 javascript 回显到页面，因此它试图将 USA 评估为变量，而不是字符串。这会破坏 javascript，因此其余操作不会发生。

我使用查询参数手动访问 findCity.php 的 URL，这一切正常，所以我怀疑一旦修复了 javascript 错误，如果没有其他问题，你就可以参加比赛了。

正如我的评论中所述，我强烈建议您使用 mysql_real_escape如果你坚持使用 mysql_* 风格的函数，尽管大多数人会告诉你使用 PDO 或 PHP 5.5 中类似的东西 > mysql_* 函数被认为大部分已被弃用