ajax提交方式,ajax表单提交

  • 编辑: 邬雅素
  • 2019-11-13 21:15:02
  • 人阅读
ajax,当你做一个项目时,你总是会遇到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-labelspan class=text-red*/span 商家名称/labeldiv class=col-md-8{input}/divlabel 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框架后台,具体操作过程试项目而定,基本操作过程都一样。

本文原标题:ajax提交,ajax如何提交表单

版权声明:本文由 邬雅素 整理编辑,如果侵权请联系我们!

转载注明出处:http://www.nintaus.net/jichu/4158.html

文章评论

共有 条评论来说两句吧...

用户名:

验证码:

Top