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 引用文件技巧
Mar 02 PHP
php curl常见错误:SSL错误、bool(false)
Dec 28 PHP
php图片加水印原理(超简单的实例代码)
Jan 18 PHP
PHP 之 写时复制介绍(Copy On Write)
May 13 PHP
php smarty truncate UTF8乱码问题解决办法
Jun 13 PHP
ThinkPHP实现一键清除缓存方法
Jun 26 PHP
ThinkPHP使用smarty模板引擎的方法
Jul 01 PHP
Symfony控制层深入详解
Mar 17 PHP
PHP十六进制颜色随机生成器功能示例
Jul 24 PHP
PHP实现权限管理功能示例
Sep 22 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
Mar 25 PHP
PHP进阶学习之类的自动加载机制原理分析
Jun 18 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中simplexml_load_string函数使用说明
2011/01/01 PHP
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
python插入排序算法的实现代码
2013/11/21 Python
python 连接sqlite及简单操作
2017/06/30 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
责任书格式范文
2014/07/28 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
党员作风建设整改方案
2014/10/27 职场文书
表扬通报怎么写
2015/01/16 职场文书
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技