Yii2基于Ajax自动获取表单数据的方法


Posted in PHP onAugust 10, 2016

本文实例讲述了Yii2基于Ajax自动获取表单数据的方法。分享给大家供大家参考,具体如下:

这里有两张表,表结构如下,locations表存放的省份和邮编等信息,两张表的model和curd均使用gii生成

yii2advanced.customers表

customer_id:int(11)
customer_name:varchar(100)
zip_code:varchar(20)
city:varchar(100)
province:varchar(100)

yii2advanced.locations表

location_id:int(11)
zip_code:varchar(20)
city:varchar(100)
province:varchar(100)

这里要通过在customer选择zip_code之后自动在表单中填充这个邮编对应的城市和省份信息

实现方法

首先需要在Locations控制器里面添加一个方法,他可以通过get过来的zip_id获取对应的location信息

public function actionGetCityProvince($zipId)
{
  $location = Locations::findOne($zipId);
  echo Json::encode($location);
}

然后通过JS监听select,当select改变时,使用jQuery的get方法获取对应的信息,并使用jQuery的attr方法设置city和province的value即可

JS代码,位于customer的form视图

#zipCode 是select的id

<?php
$script = <<<JS
jQuery('#zipCode').change(function(){
  var zipId = $(this).val();
  jQuery.get('index.php?r=locations/get-city-province',{zipId:zipId},function(data){
    var data = jQuery.parseJSON(data);
    jQuery("#customers-city").attr("value",data.city);
    jQuery("#customers-province").attr("value",data.province);
  });
 
});
JS;
$this->registerJs($script);
?>

希望本文所述对大家基于Yii框架的PHP程序设计有所帮助。

PHP 相关文章推荐
使用php shell命令合并图片的代码
Jun 23 PHP
php 字符串替换的方法
Jan 10 PHP
PHP json格式和js json格式 js跨域调用实现代码
Sep 08 PHP
基于header的一些常用指令详解
Jun 06 PHP
php中的filesystem文件系统函数介绍及使用示例
Feb 13 PHP
php判断字符串在另一个字符串位置的方法
Feb 27 PHP
codeigniter中测试通过的分页类示例
Apr 17 PHP
简单的php新闻发布系统教程
May 09 PHP
PHP 9 大缓存技术总结
Sep 17 PHP
学习php设计模式 php实现合成模式(composite)
Dec 08 PHP
php检查函数必传参数是否存在的实例详解
Aug 28 PHP
PHP使用Redis实现Session共享的实现示例
May 12 PHP
教你在header中隐藏php的版本信息
Aug 10 #PHP
PHP通过加锁实现并发情况下抢码功能
Aug 10 #PHP
PHP身份证校验码计算方法
Aug 10 #PHP
PHP5.4起内置web服务器使用方法
Aug 09 #PHP
PHP Filter过滤器全面解析
Aug 09 #PHP
学习PHP Cookie处理函数
Aug 09 #PHP
利用PHP命令行模式采集股票趋势信息
Aug 09 #PHP
You might like
php开发环境配置记录
2011/01/14 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
python网络编程实例简析
2014/09/26 Python
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
Python实现名片管理系统
2020/02/14 Python
python实现翻译word表格小程序
2020/02/27 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
初三化学教学反思
2014/01/23 职场文书
班主任班级寄语大全
2014/04/04 职场文书
检讨书格式
2015/01/23 职场文书
前台接待岗位职责
2015/02/03 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
家庭贫困证明
2015/06/16 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android
Python日志模块logging用法
2022/06/05 Python