1. 程式人生 > >Yii2 ActiveForm元件的ajax提交

Yii2 ActiveForm元件的ajax提交

ActiveForm如何非同步提交?

1.首先在views層的ActiveForm中配置以下屬性

$form = ActiveForm::begin([
    'action' => Url::to(['post/save']),           //此處為請求地址 Url用法檢視手冊
    'enableAjaxValidation' => true,
        'validationUrl' => Url::to(['post/validate']),     //資料非同步校驗
]);

2.配置好表單屬性之後,在控制器中新增對應的方法

validateUrl對應的方法

//該方法是非同步校驗欄位,輸入框失去焦點之後自動會自動請求改地址
public function actionValidate(){
    $model = new PostModel();
    if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {        
        Yii::$app->response->format = Response::FORMAT_JSON;        
        return ActiveForm::validate($model);
    }
}

action對應的方法

 

//該方法是資料儲存方法
public function actionSave()
{
    $model = new PostCatModel();
    if ($model->load(Yii::$app->request->post())) {
        Yii::$app->response->format = Response::FORMAT_JSON;
        return ['status' => $model->save()];
    }        
}

除此之外,還要寫一段提交的js

//此處點選按鈕提交資料的jquery
$('.btn').click(function () {
$.ajax({
        url: "/post/save.html",
        type: "POST",
        dataType: "json",
        data: $('form').serialize(),
        success: function(Data) {
            if(Data.status)
                alert('儲存成功');
          else
            alert('儲存失敗')
        },
        error: function() {
            alert('網路錯誤!');
        }
    });
    return false;
});

注:actionSave中對應的名稱空間要加上,否則會報錯

比如 Response 和 ActiveForm 

 

use yii\web\Response;
use yii\bootstrap\ActiveForm;

上面就是ActiveForm對應的非同步提交方法