thinkPHP5+Angular的游戏客服会话

最新推荐文章于 2024-08-06 19:16:22 发布
最新推荐文章于 2024-08-06 19:16:22 发布
阅读量800 收藏
点赞数 1
分类专栏： Angular2 thinkphp5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fang799336159/article/details/79177057
版权

玩家与客服的在线聊天系统，可以同时接待多个玩家会话，后台直接走缓存，不走数据库。

最近捣鼓的一个东西，起先我这边要走3个方向，游戏前段=》PHP后台=》web后台管理页面，

后台是thinkPHP5.0做的，web后台是Angualr2.X 版本做的，采用排队方式

游戏前端还有web后台通过不断调用后台接口，间接实现轮询的方式，从后台返回的数据来显示给用户或者客服进行聊天会话

结合起来要注意几个方面的问题

第一个是玩家突然关闭页面，因为无法截取玩家或者客服是否关闭浏览器页面，所以要注意玩家掉线或者客服掉线情况

第二玩家可能开个浏览器进行多次排队的情况（用户想法预测不到）；

第三个就是客服准备接待同步通知玩家接待。

这些功能说白了就是数组方面的操作。

先上后台代码


//客服
public function game_get($name)
{
    $msg = Cache::get('msg' . $name);
    $close = Cache::get('close_msg' . $name);
    $new_time = strtotime(date("Y-m-d H:i:s", time())); //获取最新时间戳
    $result = array();
    $service_past_time = Cache::get('service_past' . $name);//获取客服缓存时间
    $player_past_time = Cache::get('player_past' . $name);//获取玩家缓存时间
    if (Request::instance()->has('service_id')) {
        Cache::set('service_past' . $name, $new_time, 600); //600秒并不是固定
    }
    if (Request::instance()->has('player_id')) {
        Cache::set('player_past' . $name, $new_time, 600);
    }
    if ($close != false) {   //手动退出会话    
        $result['close'] = $close;
        $this->exit_reception($name);
    }
    if ($service_past_time + 10 < $new_time) {
        $this->exit_reception($name);
        $result['close'] = 4;//客服掉线
    }
    if ($player_past_time + 10 < $new_time) {
        $this->exit_reception($name);
        $result['close'] = 3;//用户掉线
    }
    $result['result'] = 1; //正常返回标识  
    $result['list'] = $msg; //数据
    echo json_encode($result);
}
//客服或者玩家输入消息接口
public function game_set($id, $msg, $name)
{
    $old_msg = Cache::get('msg' . $name);  
    $time = strtotime(date("Y-m-d H:i:s", time()));
    if ($old_msg == false) {   //缓存为空
        $k = array();
        Cache::set('msg' . $name, $k, 3600);
    }
    $old_msg = Cache::get('msg' . $name);  //重新拿值
    $packet = array('id' => $id, 'msg' => $msg, 'time' => $time + $id);
    array_push($old_msg, $packet);  //将数据塞入数组内
    $result = array();
    $result['result'] = 1;
    $result['list'] = $old_msg;
    Cache::set('msg' . $name, $old_msg, 3600);
    echo json_encode($result);
}

//排队
public function line_up($id, $name, $img_url)
{
    if ($id == null) { //解决容错
        return;
    }
    $time = date("H:i:s", time());
    $line_up = Cache::get('line_up');
    if ($line_up == false) {  如果当前无人排队则塞入空
        $k = array();
        Cache::set('line_up', $k);
    }
    $line_up = Cache::get('line_up');
    foreach ($line_up as $key => $value) { //重复排队问题
        if ($id == $value['id']) {
            unset($line_up[$key]);
            Cache::set('line_up', $line_up);
        }
    }
    $new_line_up = Cache::get('line_up');
    $packet = array('id' => $id, 'name' => $name, 'time' => $time, 'img_url' => $img_url);
    array_push($new_line_up, $packet);   //新的玩家排队，塞入队列中
    Cache::set('line_up', $new_line_up);
    $count = count($new_line_up);//排队人数

    $result = array();
    $result['count'] = $count;
    $result['list'] = $new_line_up;
    echo json_encode($result);
}

//后台排队通知接口,给web后台显示当前排队人数，并拿到玩家头像
public function user_line_up($token)
{
    if (!$this->auth($token))
        return;
    $line_up = Cache::get('line_up');
    $new_line_up = array_values($line_up);
    $img_url = SystemConfigModel::get('user_icon');
    $count = count($line_up);
    $result = array();
    $result['count'] = $count;
    $result['list'] = $new_line_up;
    $result['url'] = $img_url['value'];
    echo json_encode($result);
}

//全部标记为已读，清空排队人数
public function read_line_up($token)
{
    if (!$this->auth($token)) {
        return;
    }
    Cache::rm('line_up');
}

//退出排队，玩家关闭客服页面时，或者正在接待玩家，清除玩家排队状态
public function out_line_up($id)
{
    $line_up = Cache::get('line_up');
    foreach ($line_up as $key => $value) {
        if ($id == $value['id']) {
            unset($line_up[$key]);
            Cache::set('line_up', $line_up);
        }
    }
}
//退出会话，清空玩家信息的缓存
public function exit_reception($name)
{
    Cache::rm('msg' . $name);
    Cache::rm('player_past') . $name;
    Cache::rm('service_past') . $name;
}
//游戏当前排队人数 ，游戏前端轮询接口，如果返回reception，表示玩家可以进入会话页面与客服会话
public function line_up_people($id)
{
    $line_up = Cache::get('line_up');
    $count = array();
    $reception = Cache::get('reception' . $id);
    if ($reception != false) {
        $count['reception'] = $reception;
    }
    $count['count'] = count($line_up);
    echo json_encode($count);
}



public function close_msg($id, $name) //客服关闭会话
{   //退出会话消息
    Cache::rm('msg' . $name);
    Cache::rm('reception' . $id);
    Cache::set('close_msg' . $name, 1, 3); //退出会话缓存
    $this->out_line_up($id);
}

//客服接待
public function reception($token)
{
    if (!$this->auth($token))
        return;
    $line_up = Cache::get('line_up');
    if ($line_up == false) {            //无人排队
        $result = array();
        $result['result'] = 0;
        echo json_encode($result);
    } else {
        $result = array();
        $result['list'] = array_shift($line_up);
        $result['count'] = count($line_up);//总数
         echo json_encode($result);
        Cache::set('line_up', $line_up);
    }
}

//通知玩家接待
public function now_reception($player_id, $name, $token)  //写入双方过期时间，如果不重新获取消息便清空缓存告知双方，玩家/客服掉线
{
    if (!$this->auth($token))
        return;
    Cache::set('reception' . $player_id, 1, 5);
    $time = strtotime(date("Y-m-d H:i:s", time()));
    Cache::set('player_past' . $name, $time, 100);
    Cache::set('service_past' . $name, $time, 100);
    $this->out_line_up($player_id);
}
以上后台接口

接下来就是web后台Angular的操作了。

建立一个客服service.comoponent 客服服务chat.service,界面需要慢慢秀才会好看，我写这个没有什么设计图，只是自己想搞成什么样就是怎么样的

import {Component, OnDestroy} from '@angular/core';
import {Http} from '@angular/http';
import {GlobalState} from '../../../global.state';
import {ChatData} from "./chat_data.component";


@Component({
    selector: 'reception-player',
    template: `        
            <div class="col-md-12" style="height: 400px;position: absolute;margin: 0 auto">
                <div class="col-md-12"  style="background: white;border-top-left-radius: 2em;border-top-right-radius:2em;">
                    <hr/>
                    <span style="font-size: 19px;color: black">当前排队人数:{{count}}
                    <button class="btn btn-success" (click)="reception()">接待</button>
                    </span>
                    <button class="badge badge-secondary float-right pull-right btn btn-success" (click)="chat_min()">最小化</button>
                </div>
                <div class="col-md-4" style="height: 400px;float: left;overflow:hidden;background: white;border-bottom-left-radius: 2em;">
                    <div class="list-group" style="margin-top: 3px;" *ngFor="let item of reception_arr">
                        <div class="list-group-item hread_hover" (click)="user_chat(item.id,item.name)"
                             [ngClass]="{'bk': item.id==this.player_id}">
                            <div class="img-area">
                                <img src="{{'http://'+user_icon+item.img_url}}" style="width: 45px;height: 45px;"/>
                            </div>
                            <a style="margin-left: 30px;color: black">{{item.name}}</a>
                            <a class="fa fa-close" style="position: absolute;right:5px;font-size: 15px;"
                               [ngClass]="{'fa-spin':item.id==this.player_id}" (click)="close_msg(item.id,item.name)">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-8" style="background: #ebf0f5;height: 400px;float: right;border-bottom-right-radius: 2em;">
                    <div style="height: 300px;overflow-y: scroll;margin-top: 15px" id="chat_height">
                        <div class="list-group " *ngFor="let items of messages">
                            <button type="button" class="list-group-item chat_msg_left hread_hover"
                                    *ngIf="items.id==player_id">
                                <!--<img src="{{'http://'+user_icon+'avater_man_1.png'}}" style="width: 35px;height: 35px;"/>-->
                                <audio *ngIf="this.audio_music==true" id="myAudio" autoplay>
                                    <source src="../../../../assets/music/yx.mp3" type="audio/mp3"/>
                                </audio>
                                {{items.msg}}
                            </button>
                            <button type="button" class="list-group-item chat_msg_right hread_hover"
                                    *ngIf="items.id==service_id">
                                {{items.msg}}
                            </button>
                        </div>
                    </div>
                    <hr/>
                    <div class="input-group">
                        <input type="text" class="form-control" [(ngModel)]="set_msg"
                               aria-describedby="inputWarning2Status" style="color: black"/>
                        <span class="input-group-btn">
                    <button class="btn btn-success btn-lg" type="button" (click)="set()">发送</button>
                    </span>
                    </div>
                </div>
                    <ngb-alert class="col-md-12" *ngIf="user_close==true" [dismissible]="false">{{tip_msg}}</ngb-alert>
            </div>
    `,
    styles: [`        
        .bk {
            background: silver;
        }

        .hread_hover:hover {
            background: salmon;
        }

        .chat_msg_left {
            position: relative;
            left: 0px;
            margin-top: 12px;
            word-wrap: break-word;
            width: 50%;
            border-radius: 10px;
            background: yellow;
            border-radius: 10px;
        }

        .chat_msg_right {
            position: relative;
            right: -49%;
            margin-top: 12px;
            width: 50%;
            border-radius: 10px;
            word-wrap: break-word;
            background: deepskyblue;
            border-radius: 10px;
        }

        .img-area {
            float: left;
            width: 36px;
        img {
            width: 36px;
            height: 36px;
        }
        img > div {
            width: 36px;
            height: 36px;
            border-radius: 4px;
            font-size: 24px;
            text-align: center;
        }
        }
    `]
})
export class ReceptionPlayerComponent implements OnDestroy {
    public get_timer;
    public height_bottom;
    public audio_music: boolean = false;
    public end_time: number = 0;
    public messages: Array<any> = new Array();
    public count;
    public user_icon: any;
    public img_url: any;
    public url = new Array();
    public reception_arr = new Array();
    public set_msg;
    public player_id;
    public service_id;
    public tip_msg;
    public user_close: boolean;
    public player_name = "";
    public timer: Array<any> = new Array();
    public userInfo: Array<any> = new Array();
    public msgs: Array<any> = new Array();

    constructor(private http: Http, private state: GlobalState,public chat_date:ChatData) {
        this.get_timer = setInterval(() => {
            this.ngAfterViewInit();
        }, 800);
        this.http.get(this.state.host + "admin/system/admin_info" + '/token/' + this.state.token)
            .toPromise().then(data => {
            var result = data.json();
            this.service_id = result.id;
        });
    }
    ngAfterViewInit() {
        this.http.get(this.state.host + "admin/system/user_line_up/token/" + this.state.token)
            .toPromise().then(data => {
            var packet = data.json();
            this.count = packet.count;
            this.user_icon = packet.url;
            this.chat_date.wait_player=packet.list;
            this.chat_date.icon=this.user_icon;
            this.chat_date.count=this.count;
        });
        if (this.player_name != "") {
            this.messages = this.msgs[this.player_name];
        }
    }
    chat_min(){
        if(this.state.chats==false){
            this.state.chats=true;
        }else{
            this.state.chats=false;
        }
    }
    user_chat(id: any, name: any) {
        this.player_id = id;

        this.player_name = name;
        this.messages = this.msgs[this.player_name];
        this.height_bottom = document.getElementById('chat_height').scrollHeight;
        document.getElementById('chat_height').scrollTo(0, this.height_bottom + 30);
    }

    player_type(id, name) {
        var time = setInterval(() => {
            this.http.get(this.state.host + "admin/system/game_get" + '/service_id/' + this.service_id + '/name/' + name)
                .toPromise().then(data => {
                var packet = data.json();
                if (packet.list == false) {
                    if (packet.close == 3) {
                        this.user_close = true;
                        this.tip_msg = name + "掉线";
                        setTimeout(() => {
                            this.user_close = false;
                        }, 2000);
                        this.exit_reception(id, name);
                    }
                    return;
                }
                if (packet.close == 1) {
                    this.user_close = true;
                    this.tip_msg = name + "退出会话";
                    setTimeout(() => {
                        this.user_close = false;
                    }, 2000);
                    this.exit_reception(this.player_id, name);
                }
                else if (packet.close == 3) {
                    this.user_close = true;
                    this.tip_msg = name + "掉线";
                    setTimeout(() => {
                        this.user_close = false;
                    }, 2000)
                    this.exit_reception(this.player_id, name);

                }
                else {
                    this.msgs[name] = packet.list;
                    var len = this.msgs[name].length;
                    if (this.msgs[name] != "" && this.msgs[name].length != 0) {
                        if (this.msgs[name][len - 1].id == id) {
                            if (this.end_time != this.msgs[name][len - 1].time) {
                                this.end_time = this.msgs[name][len - 1].time;
                                this.audio_music = true;
                            } else {
                                this.audio_music = false;
                            }
                        }
                    }
                }

            });
        }, 1000);
        this.timer.push(time);
        this.user_chat(this.player_id, name);
    }
    
    //接待
    reception() {
        if (this.reception_arr.length > 5) {
            this.tip_msg = "客服最多同时接待5个玩家";
            this.user_close = true;
            setTimeout(() => {
                this.user_close = false;
            }, 5000);
        }
        else {
            this.http.get(this.state.host + "admin/system/reception" + '/token/' + this.state.token)
                .toPromise().then(data => {
                var result = data.json();
                if (result.result == 0) {
                    this.tip_msg = "当前无人请求客服";
                    this.user_close = true;
                    setTimeout(() => {
                        this.user_close = false;
                    }, 5000);
                }
                else {
                    setTimeout(() => {
                        this.player_id = result.list.id;
                        this.player_name = result.list.name;
                        this.reception_arr.push(result.list);
                        this.userInfo = this.reception_arr;
                        //通知玩家
                        this.http.get(this.state.host + "admin/system/now_reception" + '/player_id/' + this.player_id + '/name/' + this.player_name + '/token/' + this.state.token)
                            .toPromise().then(data => {
                            this.player_type(this.player_id, this.player_name);
                        });
                    }, 500);
                }
            });
        }
    }
    // private getChatData(id: number): number {
    //     for (let i = 0; i < this.userInfo.length; i++) {
    //         if (this.userInfo[i].id == id) {
    //             return i;
    //         }
    //     }
    // }
    //输入消息
    set() {
        var url: string = this.state.host + "admin/system/game_set/?";
        url = url + 'id=' + this.service_id;
        url = url + '&msg=' + this.set_msg;
        url = url + '&name=' + this.player_name;
        this.http.get(url)
            .toPromise().then(data => {
            // setTimeout(() => {
            this.height_bottom = document.getElementById('chat_height').scrollHeight;
            document.getElementById('chat_height').scrollTo(0, this.height_bottom + 30);
            this.user_chat(this.player_id, this.player_name);
        });
    }
    exit_reception(id, name) {
        this.msgs[name] = [''];
        for (var i = 0; i < this.reception_arr.length; i++) {
            if (this.reception_arr[i].id == id) {
                clearInterval(this.timer[i]);
                this.timer.splice(i, 1);
                this.reception_arr.splice(i, 1);
            }
        }

    }

    close_msg(id, name) {
        this.exit_reception(id, name);
        var url: string = this.state.host + "admin/system/close_msg/name/" + this.player_name + '/id/' + this.player_id;
        this.http.get(url)
            .toPromise().then(data => {
            this.user_chat(id, name);
            this.tip_msg = '关闭玩家' + name + "会话";
            this.user_close = true;
            setTimeout(() => {
                this.user_close = false;
            }, 2000);
        });
    }

    ngOnDestroy() {
        clearInterval(this.get_timer);

    }
}
服务： 

import { Injectable} from "@angular/core";
import {Http} from "@angular/http";
import {GlobalState} from "../../../global.state";
@Injectable()
export class ChatData
{
    public timer:Array<any> = new Array();
    public wait_player:Array<any>=new Array();
    public icon:any;
    public count:number;
    constructor(private http:Http,private state:GlobalState){


    }

}
其实更多就是客服把后台请求接口还有一系列的逻辑操作放在服务，这样会显得更加有层次感，现在服务仅仅存放数据用，供给其他页面调用，或者成为其他页面的viewchild

（目录一小部分）









博主方友镜
关注
专栏目录
基于thinkphp 5.1 + workman + gateway 实现简单的在线客服聊天系统
04-11
基于thinkphp 5.1 + workman + gateway 实现简单的在线客服聊天系统
在线客服系统开源代码PHP
07-25
在线客服系统开源代码PHP 国内最好的在线客服系统
thinkphp8+workerman+vue3开发的现代化在线客服系统
最新发布
微信小程序商城
08-06 1220
基于BuildAdmin和Workerman的在线客服系统，前端使用vue3和nuxt，具有多客服、实时邀请、知识库、高效客服分配、客服代表转接、现代化会话窗口、自动邀请、自动回复等众多功能
AngularJS+thinkphp相关笔记（一）
badongqing5553的博客
06-19 179
1.应用：一些功能的组合就是应用。2.jQuery是一个类库（一系列函数的集合），AngularJS是一个框架（一堆类库的集合）。3.AngularJS◆前端MVC框架/诸多类库的集合/以数据和逻辑为核心。◆其它前端框架：backbone/knockoutJS/vue/react框架。◆核心特性：模块儿化/双向数据绑定/语义化标签/依赖注入。◆◆◆◆4....
基于php空间的在线客服,thinkphp 在线客服系统
weixin_39560207的博客
03-12 230
WeLive是客服系统的快速解决方案，只需要引入一段js代码即可接入自己的系统，原业务代码无需任何更改。 您可以通过授权的方式获得WeLive所有源码，一次授权终身有效。 授权后将获得所有WeLive的所有源码(前端＋后端＋数据库)。支持多客服、排队、随机接待、私聊、发表情、发图片、发文件、历史消息、 离线消息、消息提醒、系统消息、在线留言、服务评价、智能机器人、自动回复等功能。 兼容除IE6/7...
thinkphp5+Gatewayworker搭建的web客服系统
dabao87的博客
10-10 729
github地址：https://github.com/yangshengquan87/thinkphp5-Gatewayworker-web-/tree/master/laykefu
ThinkPhp5+bootstrap搭建个人博客网站
12-31
在本文中，我们将深入探讨如何使用ThinkPhp5框架与Bootstrap前端框架来构建一个个人博客网站。这个项目不仅包含了用户注册、登录以及文章管理的核心功能，还利用了文章标签系统，提供了一个直观且易于操作的界面。...
thinkphp5+layui后台系统(含数据库脚本).rar
12-22
《深入剖析ThinkPHP5+Layui后台系统与数据库脚本》 在现代Web开发中，PHP作为服务器端脚本语言，广泛应用于构建动态网站和应用程序。ThinkPHP5作为一个强大的PHP框架，以其简洁的语法、丰富的功能和高效的性能，...
Thinkphp5+layui响应式企业站源码.zip
02-25
《Thinkphp5与Layui构建响应式企业网站详解》 在现代互联网环境中，企业站的设计与开发至关重要，它不仅代表了企业的形象，也是与客户交互的重要窗口。本篇文章将深入探讨如何使用Thinkphp5框架结合Layui前端组件库...
完整的Thinkphp5+LayUI开源后台管理系统源码.rar
08-05
《基于Thinkphp5和LayUI的开源后台管理系统详解》 在现代的Web开发中，高效、便捷的框架和UI库对于快速构建功能强大的后台管理系统至关重要。本篇将深入探讨"完整的Thinkphp5+LayUI开源后台管理系统源码"这一资源，...
ThinkPHP5+layui框架后台管理系统.zip
08-04
《深入理解ThinkPHP5与layui框架构建后台管理系统》 在当今的互联网开发环境中，高效、易用且功能强大的后台管理系统是企业级应用不可或缺的一部分。本系统基于ThinkPHP5框架和layui前端组件库，旨在提供一个稳定、...
workerman 整合thinkphp5 聊天
05-12
实时通讯聊天整合tp5 结合workerman 有需要研究的自己下载
thinkphp+workerMan实现聊天功能
02-25
thinkphp5整合workMan功能实现web聊天室功能。实现有效的im模块
最新thinkPHP在线客服系统完美运行
02-20
最新thinkPHP在线客服系统完美运行
Mibew Messenger(在线客服系统) v1.6.4
10-25
Mibew Messenger 是一个开源的在线客服系统。 Mibew Messenger 可以让客户或访问者与管理员在线聊天（所有聊天记录都将被记录）。该系统支持无限个客服人员、访问 者和聊天记录。提供一个Web管理界面，让管理员可以：设置自动回复信息，跟踪访问人员是从哪里点进来的，搜索历史聊天记录，将信息转发给其它管理员，标 记“变态”访问者，查看当前所有通话情况,当客服人员离线时访问人员还可以留言。聊天窗口外观完全可利用模板自定义。Mibew Messenger(在线客服系统) 1.6.4 更新内容：在一个mibew数据库的几个实例 修复了历史搜索，声音通知，重定向，按钮图像，验证码等 界面改进：通知板，柱 在线/离开经营者名单（在“等待游客”页） 更多的预安装检查 默认管理员admin 密码为空
ThinkPHP与Angular使用POST方法传递数据的问题
会开花的树
07-04 2667
在最近的一个项目中前端使用了Angular，后台使用了ThinkPHP。但是在前后台数据交换的时候发现下面问题： ThinkPHP的I方法并不能解析出POST请求携带的数据。 一、场景还原 Angular 的POST请求： Document var app = angular.module("myAPP",[]) app.
AngularJS+ThinkPHP实例教程
时光清浅处，一步一安然
08-12 8811
总体思路 thinkphp通过RESTful方式提供数据给angular，前端（包括模板页面）全部由angular来接管。 示例 实现一个用户管理模块，走通增删改查4个操作，通过该示例，演示如何在thinkphp中使用angularjs。 一. 准备工作 1. 加载所需的js和css文件 angular.min.js angular核心库文件 angular-
在线客服系统源码（thinkphp网页在线客服系统源码完整搭建）
csdxcode的博客
07-19 6349
另外，客#服源码也不太适用于小规模的企业通讯场景，用客#服源码往企业通讯场景上套就有点“杀鸡用牛刀”，因为企业通讯更强调功能丰富而非极限性能，与客#服源码的目标不符，所以二者的上层设计也不同。另外，在产品对比章节下，我们也提到了客#服源码项目的缺点供您参考。1、（业务功能完善性）客#服源码支持几乎所有商用即时通讯产品所支持的即时通讯相关功能（甚至还有更多的业务功能），且无业务功能限制，同时也支持一些诸如敏感词过滤（基于双数组Trie的AC自动机算法实现）、消息冷热分离存储等高级IM功能。..........
thinkphp5+mysql 二表实现二级联动
05-01
二级联动通常是指在网页中选择一个父级选项后，子级选项中只出现与父级相关的选项，以此实现筛选和筛选结果的过滤。ThinkPHP5作为一款常用的PHP框架，可以轻松实现二级联动功能。二级联动一般采用MySQL数据库中的两个表，一个存储父级选项，另一个存储子级选项。下面是如何使用ThinkPHP5和MySQL实现二级联动的步骤： 1. 创建两个MySQL表格，一个存储父级选项，一个存储子级选项，一般使用"id","name"等字段表示内容。 2. 编写ThinkPHP5中的控制器文件，从父级选项中获取所有内容，查询数据库，并将其传递给视图文件。 3. 在视图文件中，使用HTML和JavaScript编写页面并挂载到相应的控制器文件中。使用JavaScript分别获取父级选项和子级选项的DOM元素，并定义函数来控制它们。 4. 在JavaScript函数中，使用AJAX请求从服务器查询子级选项，传递给成功的回调函数处理，将结果显示在子级选项下拉列表中。 5. 完成以上步骤后，在ThinkPHP5应用程序中直接打开相应的URL，就可以看到已经成功实现的二级联动功能了。 总之，使用ThinkPHP5和MySQL可以轻松实现二级联动功能。开发人员只需按照以上步骤进行操作，并根据需要自定义相关功能即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值