Yii2实现ActiveForm ajax提交

做项目时总会碰到ajax提交的功能，特别是在做后台提交时，一般都会用模型自动生成，这个功能的使用会比较频繁，其实只要了解了流程，操作还是挺简单的，使用起来也方便。

表单部分

<?php $form = ActiveForm::begin([
  'action' => ['save'], //提交地址(*可省略*)
  'method'=>'post',  //提交方法(*可省略默认POST*)
  'id' => 'form-save', //设置ID属性
  'options' => [
    'class' => 'form-horizontal', //设置class属性
  ],
  'enableAjaxValidation' => true,
  'validationUrl' => 'validate-view',
]); ?> 

<?php echo $form->field($model,'company_name', ['inputOptions' => ['placeholder'=>'请输入商家名称','class' => 'form-control'], 'template'=>'<label for="inputCompanyName" class="col-sm-1 control-label"><span class="text-red">*</span> 商家名称</label><div class="col-md-8">{input}</div><label class="col-sm-3" for="inputError">{error}</label>'])->textInput()?> 

<?=Html::submitButton('保存',['class'=>'btn btn-primary']); ?> 

<?php ActiveForm::end(); ?>

其中：'enableAjaxValidation' => true, 必须设置，告诉表单用ajax提交

控制器（controller）部分

控制器分两部分，一部分是效验表单的正确性，另外一部分是保存

1、效验部分

public function actionValidateView()
{
  $model = new model();
  $request = \Yii::$app->getRequest();
  if ($request->isPost && $model->load($request->post())) {
    \Yii::$app->response->format = Response::FORMAT_JSON;
    return ActiveForm::validate($model);
  }
}

2、保存部分

public function actionSave()
{
  \Yii::$app->response->format = Response::FORMAT_JSON;
  $params = Yii::$app->request->post();
  $model = $this->findModel($params[id]); 

  if (Yii::$app->request->isPost && $model->load($params)) {
    return ['success' => $model->save()];
  }
  else{
    return ['code'=>'error'];
  }
}

Ajax提交from表单

$(function(){
$(document).on('beforeSubmit', 'form#form-save', function () {
    var form = $(this);
    //返回错误的表单信息
    if (form.find('.has-error').length)
    {
      return false;
    }
    //表单提交
    $.ajax({
      url  : form.attr('action'),
      type  : 'post',
      data  : form.serialize(),
      success: function (response){
        if(response.success){
          alert('保存成功');
          window.location.reload();
        }
      },
      error : function (){
        alert('系统错误');
        return false;
      }
    });
    return false;
  });
});

特别注意本人用的是Yii2 adminlte框架后台，具体操作过程试项目而定，基本操作过程都一样。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • YII2.0之Activeform表单组件用法实例

    本文实例讲述了YII2.0之Activeform表单组件用法.分享给大家供大家参考,具体如下: Activeform 文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); 下拉框:dropDownList(); 隐藏域:hiddenInput(); 文本域:textarea(['rows'=>3]); 文件上传:fileInput(); 提交按钮:submitBu

  • Yii2创建表单(ActiveForm)方法详解

    本文实例讲述了Yii2创建表单(ActiveForm)的方法.分享给大家供大家参考,具体如下: 由于表单涉及到一些验证方面的信息,属性设置又比较多.比较复杂,所以哪里有什么不正确的地方请留言指点 目录 表单的生成 表单中的方法   ActiveForm::begin()方法   ActiveForm::end()方法   getClientOptions()方法   其它方法:errorSummary.validate.validateMultiple 表单中的参数   表单form自身的属性

  • yii2 modal弹窗之ActiveForm ajax表单异步验证

    前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题,本以为modal要告一段落可以开始新的话题了,但是实际问题往往超乎想像,这不modal弹窗提交的表单说是怎么验证的问题又出来了,又出来了! 首先撇开modal不谈,我们就yii2 ActiveForm如何以Ajax的方式提交表单做一个简单的说明,这也是我们今天主题的重点,modal确实没啥好说了.后面若是有我再把话改回来. yii2中,ActiveForm默认做了客户端验证,但是表单的

  • Yii2实现ActiveForm ajax提交

    做项目时总会碰到ajax提交的功能,特别是在做后台提交时,一般都会用模型自动生成,这个功能的使用会比较频繁,其实只要了解了流程,操作还是挺简单的,使用起来也方便. 表单部分 <?php $form = ActiveForm::begin([ 'action' => ['save'], //提交地址(*可省略*) 'method'=>'post', //提交方法(*可省略默认POST*) 'id' => 'form-save', //设置ID属性 'options' => [

  • Yii2表单事件之Ajax提交实现方法

    本文实例讲述了Yii2表单事件之Ajax提交实现方法.分享给大家供大家参考,具体如下: 前言 Yii2 现在使用 JS 都必须要注册代码了. 要实现 Ajax 提交,有两种方法.一是直接在 ActiveForm 调用 beforeSubmit 参数,但是个人认为这样没有很好的把 JS 和 HTML 分开,所以我们这篇文章主要介绍第二种方法 - 外部写 JS 方法. 表单部分 <?php $form = ActiveForm::begin([ 'id' => $model->formNam

  • Yii2.0 模态弹出框+ajax提交表单

    Yii2.0 模态弹出框+ajax提交表单

    如题 我们使用模态弹出框+ajax提交表单 首先我们把index视图的create按钮添加data-toggle 和 data-target. 代码如下: <?php echo Html::a('添加请假单', ['create'], ['class' => 'btn btn-success','data-toggle'=>'modal','data-target'=>'#ajax']) ?> 在index视图添加如下代码 来显示模态弹出框: <div class=&q

  • thinkPHP5 ajax提交表单操作实例分析

    本文实例讲述了thinkPHP5 ajax提交表单操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <

  • jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法

    serialize() 方法通过序列化表单值,创建 URL 编码文本字符串.代替了一个一个传参的方式 以往写的ajax传参方式 $.ajax({ url : "${ctx}/SJStandardDamPartition/insertOrUpdateDamPartition", type : "post", dataType : "json", data: {beginsectionid:function(){ return $('#number

  • ajax 提交数据到后台jsp页面及页面跳转问题

    ajax 提交数据到后台jsp页面及页面跳转问题 我logincheck.jsp页面取传参数代码: String user=request.getParameter("user1"); String pwd=request.getParameter("pwd1"); login.jsp input 取2参数何用ajax 传给logincheck.jsp $.ajax({ type : "POST", url : baseUrl+"m/m

  • django ajax提交评论并自动刷新功能的实现代码

    在试了很多次了,终于搞定了,上代码吧.(我用的是jQuery的ajax,不是原生的) js代码: <script> $(document).ready(function () { getcomment(); $('.comment-box button').click(function () { var comment_text = $('.comment-box textarea').val(); $.ajax({ type: 'POST', url: '/bbs/article/{{ ar

  • ajax提交手机号去数据库验证并返回状态值

    本文实例为大家分享了ajax提交手机号去数据库的具体代码,并返回状态值,供大家参考,具体内容如下 <script type="text/javascript"> $(function(){ $('.agree_regi').click(function(){ var phone = $.trim($("#phone").val()); if(phone == ""){ NewAlert(2,"请输入手机号",nul

  • jQuery ajax提交Form表单实例(附demo源码)

    本文实例讲述了jQuery ajax提交Form表单的方法.分享给大家供大家参考,具体如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form代码如下: <form id="Form1" action="action.aspx" method="post" > 名称:<input

随机推荐