如何在Yii2中利用Ajax獲取表單的數(shù)據(jù)

這篇文章將為大家詳細(xì)講解有關(guān)如何在Yii2中利用Ajax獲取表單的數(shù)據(jù)，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

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之后自動(dòng)在表單中填充這個(gè)郵編對(duì)應(yīng)的城市和省份信息

實(shí)現(xiàn)方法

首先需要在Locations控制器里面添加一個(gè)方法，他可以通過get過來的zip_id獲取對(duì)應(yīng)的location信息

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

然后通過JS監(jiān)聽select，當(dāng)select改變時(shí)，使用jQuery的get方法獲取對(duì)應(yīng)的信息，并使用jQuery的attr方法設(shè)置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);
?>

關(guān)于如何在Yii2中利用Ajax獲取表單的數(shù)據(jù)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。