yii2 ajax项目实例.docx

一、 简单的ajax请求静态页面index.html：如下以下有get；post；ajax；方法的请求写法。Get与post请求写法格式一致，仅传值的方式不同而已，传递的数据量极限不一样。当点击该按钮发送ajax请求发送一个get请求/$.get()方式请求 /* $(#btn).click(function() $.get(get.php,username:wxj,age:25,function(data) /alert(data); $(#div_get).html(data); ); ); */$.post();方式请求 /* $(#btn).click(function() $.post(get.php,username:wxj,age:25,function(data) /alert(data); $(#div_get).html(data); ); ); */ /$.ajax();方式请求（综合get和post） $(#btn).click(function() $.ajax( url:get.php, data:username:wangxiaojun,age:23,sex:男, success:function(data) $(#div_get).html(data); , dataType:html, type:post ); );get.php:?phpecho 123;echo ;var_dump($_REQUEST);echo ;echo $_GETusername;二、 AjaxYii2中应用ajax加上下面这句，不做验证public $enableCsrfValidation = false;2.1新建操作由于本次项目中前端伙伴提供的弹层用js写的页面，因此必须用ajax传值如下js弹层（新建）/新建mbNew: + + + + *员工姓名：+ + *工作地点：+ + + + *身份证号：+ + *所属业物：+ + yt0 + + yt_list + + + + 在职状态：+ 在职在职离职+ + + 是否已绑定微信：+ 否+ + + + + 已绑定openID：+ fssfsfe3423424266+ + + + + + + 保存+ 取消+ + ,点击【新建】按钮时点击【保存】按钮，所有条件验证成功后ajax传值。以post方式传值，将需要值获取后，填写URL，Data，回调函数，强制转为json格式，本例中的回调函数是验证正确后输出返回值，延时2s后刷新页面/验证成功执行function newSaveCallback() /刷新列表fn var name = $(#name).val(); var city = $(#city).val(); var id_card = $(#id_card).val(); var department = $(.yt).text(); $.post(/admin/staff/add, name: name, city: city, id_card: id_card, department: department , function (r) if (r.code = 200) tips.init(success, r.msg); setTimeout(window.location.reload(), 2000); return; else tips.init(error, r.msg); return; , json);因ajax的URL只想StaffController下的add方法，且以post方式传值。$model = new StaffInfo();是因客户需要将身份证号码加密，此为yii2的加密方法。获取传过来的数据插入数据库，若执行save（）成功则入库成功，返回json格式的操作信息。public function actionAdd() error_log(111, 3, /home/sqwangxiaojun/shenzhouzhuanche_v3.0/runtime/logs/aa.log); $model = new StaffInfo(); $security = new Security(); if (Yii:$app-request-post() $request = yii:$app-request; $model-name = $request-post(name); $model-department = $request-post(department); /身份证加密存置数据库 $id_card1 = $security-encryptByKey($request-post(id_card), Yii:$app-paramssecurityKey); $id_card = base64_encode($id_card1); $model-id_card = $id_card; $model-city = $request-post(city); $model-create_time = time(); $model-status = Y; $model-bind = N; $model-save(); if ($model-save() return $this-toJson(200, 员工信息添加成功); else return $this-toJson(400, 异常); else return $this-redirect(Url:toRoute(index); 自定义封装返回值protected function toJson($code, $message) Yii:$app-response-format = yiiwebResponse:FORMAT_JSON; $items = code = $code, msg = $message; return $items;查看效果2.2编辑操作2.2.1编辑时获取当前id数据编辑时同样页面写在js文件中因此也需要通过ajax获取数据库中的信息并在弹层中显示请看js显示代码：/编辑eidtInfo: + + + + *员工姓名：+ + *工作地点：+ + + + *身份证号：+ + *所属业态：+ + 业态一+ 业态一业态二 /+ + aaa + + + + + + *在职状态：+ 在职在职离职+ + + *是否已绑定微信：+ 否否是+ + + 已绑定openID：+ + + + + + + + 保存+ 取消+ + 因此在点击【编辑】弹层的时候应用ajax向控制器update方法请求需要显示的数据，同样的填写ajax需要的4个参数，需要注意的是返回值应该是所需要的数据（当前id的数据），并将获取的数据填入相应的节点，如下所示/编辑弹窗-popeditMember: function (classEvent) var btnEvent = classEvent | .edit; var options = title: 编辑, height: 405, content: winCon.eidtInfo var clickBtnEvent = function () Window(options); optList(); $(document).off(click, btnEvent, clickBtnEvent); $(document).on(click, btnEvent, function () var thisId = this.id; var id = $(#editid).val(thisId); $.get(/admin/staff/update, id: thisId, function (r) if (r.code = 200) var info = r.msg; / console.log(info); $(.edname).val(); $(.edadd).val(info.city); $(.edidnum).val(info.id_card); $(.yt).text(info.department); $(.st).text(info.status); $(.bd).text(info.bind); $(.opid).text(info.open_id); return; else tips.init(error, r.msg); return; , json);当传入控制器下update方法时，将id获取到后向数据库中查相应的数据，取出后应对数据做相应的处理。再返回$id = yii:$app-request-get(id); $rows = StaffInfo:find()-where(id = $id)-asArray()-one(); $rowsstatus = Y ? $rowsstatus = 在职 : $rowsstatus = 离职; $rowsbind = Y ? $rowsbind = 是 : $rowsbind = 否; $id_cards1 = base64_decode($rowsid_card); $rowsid_card = $security-decryptByKey($id_cards1, Yii:$app-paramssecurityKey); if ($rows) return $this-toJson(200, $rows); else return $this-toJson(400, 异常); 返回后结果如下图页面所示2.2.1编辑时保存当前更改后的数据同样的在数据验证成功后执行ajax传值，首先获取所需数据（记得传当前id），写好4个ajax参数，如返回操作成功后在页面输出提示，延时2s后刷新页面/验证成功执行function editSaveCallback() /刷新列表fn var ed_id=$(#editid).val(); var name = $(.edname).val(); var city = $(.edadd).val(); var id_card = $(.edidnum).val(); var department = $(.yt).text(); var status = $(.st).text(); var bind = $(.bd).text(); $.post(/admin/staff/update, id:ed_id, name: name, city: city, id_card: id_card, department: department, status: status, bind: bind , function (r) if (r.code = 200) tips.init(success, r.msg); setTimeout(window.location.reload(), 2000); return; else tips.init(error, r.msg); return; , json);控制器下的update方法，获取的数据需要要处理后根据id更新数据库中的值，将操作结果返回。$security = new Security();if (yii:$app-request-isPost) $request = yii:$app-request; $id = yii:$app-request-post(id); $model = StaffInfo:find()-where(id = $id)-one(); $model-name = $request-post(name); $bind = $request-post(bind); if ($bind = 是) $bind = Y; else $bind = N; $model-bind = $bind; $model-department = $request-post(department); /身份证加密存置数据库 $id_card1 = $security-encryptByKey($request-post(id_card), Yii:$app-paramssecurityKey); $id_card = base64_encode($id_card1); $model-id_card = $id_card; $model-city