PHP学习6：点击select的省份，切换下面显示的内容、同页面的js如何把值传给php？

原创于 2022-03-06 15:31:53 发布 · 535 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#php #学习 #mariadb

PHP 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在PHP中实现一个功能，当用户在select选择器中选择省份时，通过AJAX传递选中值到province.php，然后获取数据库中相应省的数据并以JSON格式返回。在前端，利用JavaScript解析JSON并更新页面内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

①先备好<select>选择器，写好里面的option

//由于各个省份，我都是写在数据库里，再输出在select的option里的，所以下面用php循环输出
<select name="province1" id="province">
  <?php
    $rs=$DB->query("SELECT * FROM province");
    while($res = $DB->fetch($rs))
    {
      echo '<option value="'.$res['province'].'">'.$res['province'].'</option>';
    }
  ?>
</select>

②只要select选择器onchange，就触发函数，使用ajax进行传数据

传到province.php页面进行处理，记住，要把当前select的value值一起传过去。所以url要写成"province.php?pid="+this.value

<script type="text/javascript" charset="utf-8">
        var content=document.getElementById('content');
        var whichprovince = document.getElementById('province');
        whichprovince.onchange=function(){
           

          var xhr=null;
          xhr=new XMLHttpRequest();
          xhr.open("get","province.php?pid="+this.value,true);
          xhr.send();
          xhr.onreadystatechange = function(){
              if(xhr.readyState == 4){
                  var arr= JSON.parse(xhr.responseText);
                //   alert(arr);
                var str='';
                        for (var i = 0; i < arr.length; i++) {
                            str += '<a href="landscape_detail.php?id='+arr[i].landid+'"><div class="jingdian"><img src="'+arr[i].landimg+'" alt=""><span>'+arr[i].landname+'</span></div></a>';
                            
                        }
                        // alert(str);
                        content.innerHTML=str;


              }
          }
        }
        
    </script>

③我的province.php里面写的是，如下：

连接收据库
$province = $_GET['pid']; //接受到传过来的select的value值
准备好sql语句 $sql="SELECT * FROM landscape WHERE province='{$province}'";
创建一个空数组，把查询数据库之后显示的每一行都插入这个数组里面 while($row = mysqli_fetch_assoc($res)){ array_push($arr,$row); }
将这个数组转成字符串 echo json_encode($arr);

<?php
        
        include 'config.php';
        if(!$link){
             echo "连接失败";
             exit;
        }
        
        $province = $_GET['pid'];
       
        
        // 设置字符集
        mysqli_set_charset($link,"utf8");
        
        // 选择数据库
        mysqli_select_db($link,"travel");
        
        //         // 准备sql语句
        if($province == '全国'){
            $sql="SELECT * FROM landscape";
       
        }else {
            $sql="SELECT * FROM landscape WHERE province='{$province}'";
      
        }
        
        // var_dump($sql);
        // // 发生sql语句
        $res = mysqli_query($link,$sql);
        // var_dump($res);
        
        $arr = array();  //创建一个空数组
 
        while($row = mysqli_fetch_assoc($res)){
            array_push($arr,$row);   //将从数据库里取出的每一行数据，插入到数组里面
        }
        echo json_encode($arr);
        
 
      
        mysqli_close($link);
        
        
?>

④接收province.php 返回的responseText，所以看回你刚刚ajax的那个文件

如果sql语句query成功----> if(xhr.readyState == 4)
把responseText这个字符串，恢复回数组形式 var arr= JSON.parse(xhr.responseText);
通过for循环，输出你要的html语句
把这个html语句，插入到你放内容的那个dom元素里，如： content.innerHTML=str;

<script type="text/javascript" charset="utf-8">
        var content=document.getElementById('content');
        var whichprovince = document.getElementById('province');
        whichprovince.onchange=function(){
           

          var xhr=null;
          xhr=new XMLHttpRequest();
          xhr.open("get","province.php?pid="+this.value,true);
          xhr.send();
          xhr.onreadystatechange = function(){
              if(xhr.readyState == 4){
                  var arr= JSON.parse(xhr.responseText);
                //   alert(arr);
                var str='';
                        for (var i = 0; i < arr.length; i++) {
                            str += '<a href="landscape_detail.php?id='+arr[i].landid+'"><div class="jingdian"><img src="'+arr[i].landimg+'" alt=""><span>'+arr[i].landname+'</span></div></a>';
                            
                        }
                        // alert(str);
                        content.innerHTML=str;


              }
          }
        }
        
    </script>