动态依赖选择框使用PHP中的Jquery和Ajax

时间:2016-09-06 18:33:11

标签: javascript php jquery mysql ajax

我是编码的新手,我找到了一些非常有价值的信息,可以帮助我的注册表单使用Ajax更好看。 问题是,即使php文件工作正常,我认为js文件没有做它的工作。这里: 在注册表中有这样的:

<?php include 'php_includes/conexion.php'; (connect to DB users) include 'php_includes/conexionlugar.php'; (connect to DB states/cities) ?>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.js"></script>
</head>

形式就是这样:

选择州

<select name="departamento" id="departamento">
<option value="">Seleccione Departamento</option>
<?php echo cargar_departamentos();?>
</select>

选择城市

<select name="provincia" id="provincia">
<option value="">Seleccione Provincia</option>
</select>

现在,在conexionlugar.php(测试/工作):

<?php function cargar_departamentos() { $connect = mysqli_connect("localhost", "root", "root", "lugar"); $output = ''; $sql = "SELECT * FROM departamentos ORDER BY NOMBRE_DEPA"; $result = mysqli_query($connect, $sql); while($row = mysqli_fetch_array($result)) { $output = '<option value="'.$row["IDDEPARTAMENTOS"].'">'.$row["NOMBRE_DEPA"].'</option>'; echo "$output"; } } return $output; ?>

jquery.js中的

(对此不太了解:()

$(document).ready(function(){ $('#departamento').change(function(){ var IDDEPARTAMENTOS = $(this).val(); $.ajax({ url:'../php_includes/fetch_provincia.php', type:"POST", data:{departamentoId:IDDEPARTAMENTOS}, dataType:"text", success:function(data) { $('#provincia').html(data); } }); }); });

在fetch_provincia.php(测试/工作)

<?php $connect = mysqli_connect("localhost", "root", "root", "lugar"); $output =''; $sql = "SELECT * FROM provincias WHERE departamentos_IDDEPARTAMENTOS = '".$_POST["departamentoId"]."' ORDER BY NOMBRE_PROV"; $result = mysqli_query($connect, $sql); $output = '<option value="">Seleccione Provincia</option>'; while($row = mysqli_fetch_array($result)) { $output = '<option value="'.$row["IDPROVINCIAS"].'">'.$row["NOMBRE_PROV"].'</option>'; echo $output; } return $output; ?>

虽然PHP文件分别正常工作,但改变IDDEPARTAMENTOS的JS文件似乎不是......请帮助我。

我想我修好了,删除了两个php上的“return”并将js添加到同一页面而没有通过

调用它

3 个答案:

答案 0 :(得分:0)

您从php发送的数据需要以json的形式发送。我实际上不会在php中进行“格式化”。只需返回$ result:

echo json_encode($ result);

然后在你的js文件中,只需遍历“数据”并创建选项:

成功:功能(数据)             {                 $ .each(data,function(key,val){     console.log(“Key:”+ key +“val:”+ val);     }             }

答案 1 :(得分:0)

代码中有一些错误。

首先,在“cargar_departamentos”中,返回它是一个函数,在你的fetch_provincia.php中,不需要返回语句。

在你的jQuery代码中,尝试删除你头脑中调用的jQuery和将“text”的change de dataType指令改为HTML。

答案 2 :(得分:-1)

@gilgameshbk你在脑中召唤了两次jquery

这可能会引起一些冲突。