动态选择列表AJAX并通过发布表单插入数据库表

时间:2012-07-30 06:44:59

标签: javascript html ajax

我想知道我的动态选择城市列表的解决方案,现在我已成功填充城市,但现在无法将所选城市发布到数据库。

这是php文件:

<html>
<head>
<script type="text/javascript" src="show_cities.js"> </script> 
</head>
<body>
<?php 
session_start;
//library   
include("conn.php");
?>
<form enctype='multipart/form-data' action='posting_process.php' method='post'>");
<!-- **************************** Country select list ********************** -->
Country: 
<select name="country" onChange="showCities(this.value)">
<?php $sql = 'SELECT country_no, country_name FROM country '.'ORDER BY country_no';
    $rs = mysql_query($sql);
    echo "<option value='0'>"."Select a Country"."</option>\n  ";
    while($row = mysql_fetch_array($rs))
    {
echo "<option value=\"".$row['country_no']."\">".$row['country_name']."</option>\n  ";
    }
?>
</select>
City: <div id="txtCity" class="city_no">
<input type=submit name=action value=Post>
</body>
</html>

这里是javascript:show_cities.js

// JavaScript Document
/* <script type="text/javascript"> */
function showCities(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
} 
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtCity").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","get_cities.php?q="+str,true);
xmlhttp.send();
}
/* </script> */

这里是php文件:get_cities.php

<?php
session_start;
//library   
include("conn.php");
$q=$_GET["q"];

$sql="SELECT * FROM city WHERE country_no = ".$q;
$result = mysql_query($sql);

echo "<select name='city'>";

while($row = mysql_fetch_array($result))
{

echo "<option value=\"".$row['city_no']."\">".$row['city_name'] . "</option>\n";
}
echo "</select>";

?>

我不知道如何提及返回/显示城市的以下内容      问候:

1 个答案:

答案 0 :(得分:0)

为什么不使用jQuery Ajax将数据发送到后端php代码并接收响应。 你的PHP代码似乎很好,我建议使用以下机制来使用ajax。

请将ID作为“国家/地区列表”添加到前端html页面的国家/地区列表中。

使用以下代码代替您的javascript进行ajax调用。

$(function (){
    $('#countrylist').change(function() {
        var sel_val=$("#countrylist").val();
        $.ajax({
           url: 'get_cities.php?q='+sel_val,
           success: function(data) {
             $('#txtCity').html(data);
           }
        });
    });
});

另外,请确保在添加此javascript代码之前添加了jquery库。

希望这有帮助。

由于