如何在Yii2中利用Ajax获取表单的数据

这篇文章将为大家详细讲解有关如何在Yii2中利用Ajax获取表单的数据，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

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

关于如何在Yii2中利用Ajax获取表单的数据就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。