Yii2基于Ajax自动获取表单数据的方法
程序员文章站
2022-04-13 14:49:06
...
本文实例讲述了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程序设计有所帮助。
更多Yii2基于Ajax自动获取表单数据的方法相关文章请关注PHP中文网!
推荐阅读
-
php从数据库中获取数据用ajax传送到前台的方法
-
详解Vue.js基于$.ajax获取数据并与组件的data绑定
-
Ajax异步获取html数据中包含js方法无效的解决方法
-
利用js将ajax获取到的后台数据动态加载至网页中的方法
-
jquery 通过ajax请求获取后台数据显示在表格上的方法
-
详解vue 中使用 AJAX获取数据的方法
-
jquery的ajax和getJson跨域获取json数据的实现方法
-
jquery ajax异步提交表单数据的方法
-
Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)
-
jquery获取表单数据方法$.serializeArray()获取不到disabled的值