Yii2 - ActiveForm ajax 提交
Posted
技术标签:
【中文标题】Yii2 - ActiveForm ajax 提交【英文标题】:Yii2 - ActiveForm ajax submit 【发布时间】:2015-04-08 07:34:50 【问题描述】:如何使用 ActiveForm 来满足这些要求?
使用 ajax 提交表单。
在使用 ajax 提交之前:检查是否存在错误。
提交后:如果服务器响应保存结果不成功,则在字段输入下显示字段错误。
【问题讨论】:
实际上,这正是 Yii 已经为 ActiveForm 提供的功能 - 包括 javascript 以在将数据发送到服务器之前在客户端自动验证。 @robsch 它没有使用用户要求的 AJAX 提交表单。 【参考方案1】:这是您的视图。我更喜欢使用不同的操作进行验证和保存。您可以将它们加入单个方法。
<?php $form = \yii\widgets\ActiveForm::begin([
'id' => 'my-form-id',
'action' => 'save-url',
'enableAjaxValidation' => true,
'validationUrl' => 'validation-rul',
]); ?>
<?= $form->field($model, 'email')->textInput(); ?>
<?= html::submitButton('Submit'); ?>
<?php $form->end(); ?>
在验证动作中你应该写。它验证您的表单并将错误列表返回给客户端。 :
public function actionValidate()
$model = new MyModel();
$request = \Yii::$app->getRequest();
if ($request->isPost && $model->load($request->post()))
\Yii::$app->response->format = Response::FORMAT_JSON;
return ActiveForm::validate($model);
这是保存动作。验证输入数据的安全性:
public function actionSave()
$model = new MyModel();
$request = \Yii::$app->getRequest();
if ($request->isPost && $model->load($request->post()))
\Yii::$app->response->format = Response::FORMAT_JSON;
return ['success' => $model->save()];
return $this->renderAjax('registration', [
'model' => $model,
]);
此代码将在 actionValidate() 中验证您的表单,并且。要通过 AJAX 提交表单,请使用 beforeSubmit 事件。在你的 javascript 文件中写:
$(document).on("beforeSubmit", "#my-form-id", function ()
// send data to actionSave by ajax request.
return false; // Cancel form submitting.
);
就是这样。
【讨论】:
我需要根据 Ajax 调用响应来决定我应该返回 false 还是 true。但是在 ajax 响应之前 return false 正在执行。请给我建议一种方法。 @Pravin Ajax 是异步的,您通常无法从其响应中返回结果。我不太了解javascript。但是你可以寻找async/await。也许它会帮助你。 另请参阅指南 - ajax 表单提交:yiiframework.com/doc/guide/2.0/en/…【参考方案2】:使用 ajax 提交表单。 使用 ajax 提交之前:检查是否存在错误。 yii 默认显示错误....... :)
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\widgets\Pjax;
/* @var $this yii\web\View */
/* @var $model backend\models\search\JobSearch */
/* @var $form yii\bootstrap\ActiveForm */
?>
<div class="job-search">
<?php $form = ActiveForm::begin([
'action' => ['index'],
//'method' => 'get',
'options' => ['id' => 'dynamic-form111']
]); ?>
<?php echo $form->field($searchModel, 'id') ?>
<?php echo $form->field($searchModel, 'user_id') ?>
<?php echo $form->field($searchModel, 'com_id') ?>
<?php echo $form->field($searchModel, 'job_no') ?>
<?php echo $form->field($searchModel, 'court_id') ?>
<?php // echo $form->field($model, 'case_no') ?>
<?php // echo $form->field($model, 'plainttiff') ?>
<?php // echo $form->field($model, 'defendant') ?>
<?php // echo $form->field($model, 'date_fill') ?>
<?php // echo $form->field($model, 'court_date') ?>
<?php // echo $form->field($model, 'status_id') ?>
<?php // echo $form->field($model, 'created_at') ?>
<?php // echo $form->field($model, 'updated_at') ?>
<div class="form-group">
<?php echo Html::submitButton('Search', ['class' => 'btn btn-primary','id'=>'submit_id']) ?>
<?php echo Html::resetButton('Reset', ['class' => 'btn btn-default']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
<script type="text/javascript">
$(document).ready(function ()
$('body').on('beforeSubmit', 'form#dynamic-form111', function ()
var form = $(this);
// return false if form still have some validation errors
if (form.find('.has-error').length)
return false;
// submit form
$.ajax(
url : form.attr('action'),
type : 'get',
data : form.serialize(),
success: function (response)
var getupdatedata = $(response).find('#filter_id_test');
// $.pjax.reload('#note_update_id'); for pjax update
$('#yiiikap').html(getupdatedata);
//console.log(getupdatedata);
,
error : function ()
console.log('internal server error');
);
return false;
);
);
</script>
【讨论】:
以上是关于Yii2 - ActiveForm ajax 提交的主要内容,如果未能解决你的问题,请参考以下文章