PHP+Ajax+Mysql省市县三级联动

最新推荐文章于 2021-06-24 10:08:40 发布

JiangNanMax

最新推荐文章于 2021-06-24 10:08:40 发布

阅读量6.7k

点赞数 2

分类专栏： JavaScript PHP jQuery

本文链接：https://blog.csdn.net/J__Max/article/details/83720907

版权

JavaScript 同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

jQuery

14 篇文章 0 订阅

订阅专栏

PHP

9 篇文章 0 订阅

订阅专栏

PHP+Ajax+Mysql省市县三级联动

前言

之前写了个小demo，用PHP+Ajax实现一个简单的二级城市联动，传送门。之前用它来练手一下使用Ajax和PHP进行互动，所以数据就简单的以数组的形式存放在PHP文件中，但实际投入生产使用的项目肯定会将数据存放在数据库当中。因此也就有了现在的这个demo，与之前的不同在于，我将数据(包含了全国的省市县)存放在数据库中，使用Ajax向PHP发起数据请求，然后通过PHP动态地从数据库取得对应的数据并将其返回给前端，完整的实现了从前端到后台，再从后台到前端的省市县三级联动
这里先大致说明一下最后实现的效果
- 页面初始化的过程中，就会向后端发起请求，从数据库拿到省份的数据，并将其注入到对应的省份选择框中，在选择具体的省份之前，市县两个选择框是没有数据的，选择省份后，才会再向后台发起请求，取得该省份下所有市的数据，同理，县也需要在选择具体的市后才会向后台发起请求，拿到对应县的数据

在这里插入图片描述

实现原理

实现这个demo主要用到的技术有：jQuery、Ajax、PHP、MySql，其中最主要的就是包括了两层互动，使用Ajax和PHP进行互动，以及使用PHP和数据库进行互动(其实这里也不算互动，只是使用PHP从数据库取得数据，并没有插入数据)
注：这里涉及在数据库中插入数据，需要执行一个.sql文件，所有的代码文件以及依赖文件我都已经上传了，传送门
学了一天习，太累了，偷懒一下了，没有在代码中写注释 (:逃… 不过！要是有什么问题欢迎在评论里提出来！随时随地帮你解决～～～

代码实现

conn.inc.php以及mysqli.php文件，这两个文件实现和数据库建立连接

<?php
/**
 * Created by PhpStorm.
 * User: jiangnan
 * Date: 2018/10/10
 * Time: 18:06
 */

define("HOST", 'localhost');
define("USER", 'root');
define("PWD", '*****'); //密码，自行更换
define("DBNAME", 'php');

<?php
/**
 * Created by PhpStorm.
 * User: jiangnan
 * Date: 2018/10/10
 * Time: 18:07
 */

include 'conn.inc.php';

$mysqli = new mysqli(HOST, USER, PWD, DBNAME);
if ($mysqli -> connect_errno){
    die('数据库链接发生错误!'.$mysqli -> connect_error);
}
//PHP+Ajax+Mysql省市县三级联动

region_action.php文件，处理来自前端的请求，从数据库拿到对应的数据，并返回给前端

<?php
/**
 * Created by PhpStorm.
 * User: jiangnan
 * Date: 2018/10/10
 * Time: 18:07
 */
header("Content-Type:text/html;charset=utf-8");
include 'mysqli.php';
$type = isset($_GET["type"]) ? $_GET["type"] : "";
$parent_id = isset($_GET["parent_id"]) ? $_GET["parent_id"] : "";

if ($type == "" || $parent_id ==""){
    exit(json_encode(array("flag" => false, "msg" => "查询类型错误!")));
}else{
    //关于数据库操作
    $sql = "select * from global_region where parent_id=$parent_id and region_type=$type";
    $result = $mysqli -> query($sql);
    if($result -> num_rows > 0){
        $arr = [];
        while($row = $result -> fetch_assoc()){
            //
            $arr[$row["region_id"]]['region_id']=$row["region_id"];//$arr[1]["title"]=$row["title"]
            $arr[$row["region_id"]]['region_name']=$row["region_name"];//$arr[1]["content"]=$arr["content"]
        }
    }
    $provinces_json = json_encode($arr);
    exit($provinces_json);
}

?>

region.html文件，里面主要就是用jQuery实现的逻辑，通过Ajax和后端进行数据交换，还有就是少量的页面结构和样式，不难看懂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市县三级联动</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                type: "get",
                url: "region_action.php",
                data: {"parent_id": "1", "type": "1"},
                dataType: "json",
                success: function (data) {
                    $("#provinces").html("<option value=''>请选择省份</option>");
                    $.each(data, function (index, item) {
                        //alert(item.region_name);
                        $("#provinces").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
                    });
                }
            });
            $("#provinces").change(function () {
                $.ajax({
                    type: "get",
                    url: "region_action.php",
                    data: {"parent_id": $(this).val(), "type": "2"},
                    success: function (data) {
                        $("#cities").html("<option value=''>请选择市</option>>");
                        //???
                        $.each($.parseJSON(data), function (index, item) {
                            $("#cities").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
                        });
                    }
                });
            });
            $("#cities").change(function () {
                $.ajax({
                    type: "get",
                    url: "region_action.php",
                    data: {"parent_id": $(this).val(), "type": "3"},
                    success: function (data) {
                        $("#countries").html("<option value=''>请选择县</option>>");

                        $.each($.parseJSON(data), function (index, item) {
                            $("#countries").append("<option value='" + item.region_id + "'>" + item.region_name + "</option>");
                        });
                    }
                });
            });
            $("#countries").change(function () {
                var value = $("#provinces").find("option:selected").text() + $("#cities").find("option:selected").text() + $("#countries").find("option:selected").text();
                //console.log(value);
                $("#region").append("你选择的地址是：" + "<input value='" + value + "'>");
            });
        });
    </script>
</head>
<body>
<h1 align="center">PHP+Ajax+Mysql省市县三级联动</h1>
<table align="center" border="1" cellpadding="3" cellspacing="0" width="30%">
    <tr bgcolor="#87ceeb">
        <th>省份</th>
        <th>市</th>
        <th>县</th>
    </tr>
    <tr style="height: 100px">
        <th>
            <select name="" id="provinces">
                <option value="">请选择省份</option>
            </select>
        </th>
        <th>
            <select name="" id="cities">
                <option value="">请选择市</option>
            </select>
        </th>
        <th>
            <select name="" id="countries">
                <option value="">请选择县</option>
            </select>
        </th>
    </tr>
</table>
<h4>
    <div align="center" id="region"></div>
</h4>

</body>
</html>

JiangNanMax

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
6
评论
PHP+Ajax+Mysql省市县三级联动

PHP+Ajax+Mysql省市县三级联动前言之前写了个小demo，用PHP+Ajax实现一个简单的二级城市联动，传送门。之前用它来练手一下使用Ajax和PHP进行互动，所以数据就简单的以数组的形式存放在PHP文件中，但实际投入生产使用的项目肯定会将数据存放在数据库当中。因此也就有了现在的这个demo，与之前的不同在于，我将数据(包含了全国的省市县)存放在数据库中，使用Ajax向PHP...
复制链接

扫一扫