Yii2 使用Ajax自动获取表单数据

最新推荐文章于 2021-08-05 15:43:47 发布

wjtlht928

最新推荐文章于 2021-08-05 15:43:47 发布

阅读量1.9k

点赞数

分类专栏： Yii2

本文链接：https://blog.csdn.net/wjtlht928/article/details/46406873

版权

Yii2 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

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);
?>