yii2 ajax项目实例_第1页
yii2 ajax项目实例_第2页
yii2 ajax项目实例_第3页
yii2 ajax项目实例_第4页
yii2 ajax项目实例_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、一、 简单的ajax请求静态页面index.html：如下以下有get；post；ajax；方法的请求写法。Get与post请求写法格式一致，仅传值的方式不同而已，传递的数据量极限不一样。当点击该按钮发送ajax请求<script type=text/javascript src="./jquery-1.8.2.js"></script></head><body><button id="btn">发送一个get请求</button><div id ="div_get&

2、quot; style='groundcolor:red; border:1px;width:60%;height:60%'></div><script type=text/javascript >/$.get()方式请求 /* $('#btn').click(function() $.get('get.php','username':'wxj','age':25,function(data) /alert(data); $('#div_get').ht

3、ml(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'

4、:'get.php', 'data':'username':'wangxiaojun','age':23,'sex':'男', 'success':function(data) $("#div_get").html(data); , 'dataType':'html', 'type':'post' ); );</script></body>get.php:<

5、;?phpecho "123"echo "<pre>"var_dump($_REQUEST);echo "</pre>"echo $_GET'username'二、 AjaxYii2中应用ajax加上下面这句，不做验证public $enableCsrfValidation = false;2.1新建操作由于本次项目中前端伙伴提供的弹层用js写的页面，因此必须用ajax传值如下js弹层（新建）/新建mbNew: '<form name = "form" >

6、'+ '<div class="cnew">'+ '<table>'+ '<tr>'+ '<td align="right" width="134"><em>*</em>员工姓名：</td>'+ '<td><input class="popinput newname" type="text" maxlength=&q

7、uot;10" name="name" id="name" /></td>'+ '<td align="right" width="118"><em>*</em>工作地点：</td>'+ '<td><input class="popinput newadd" type="text" maxlength="10" name="

8、;city" id="city" /></td>'+ '</tr>'+ '<tr>'+ '<td align="right"><em>*</em>身份证号：</td>'+ '<td><input class="popinput newidnum" type="text" maxlength="18" name=&qu

9、ot;id_card" id="id_card" /></td>'+ '<td align="right"><em>*</em>所属业物：</td>'+ '<td><div class="cselect s-down-menu J-down-menu"><div class="s-down-input J-down-input yt">' + yt0 + '

10、</div><span class="s-down-icon"></span><ul class="s-down-list J-down-list">' + yt_list + '</ul></div></td>'+ '</tr>'+ '<tr>'+ '<td align="right">在职状态：</td>'+ '<t

11、d colspan="3"><div class="cselect s-down-menu J-down-menu"><div class="s-down-input J-down-input st">在职</div><span class="s-down-icon"></span><ul class="s-down-list J-down-list"><li>在职</li><li>

12、离职</li></ul></div></td>'+ '</tr>'+ '<tr>'+ '<td align="right">是否已绑定微信：</td>'+ '<td>否</td>'+ '<td></td>'+ '<td></td>'+ '</tr>'+ '<tr&g

13、t;'+ '<td align="right">已绑定openID：</td>'+ '<td><span class="openid">fssfsfe3423424266</span></td>'+ '<td></td>'+ '<td></td>'+ '</tr>'+ '</table>'+ '<

14、/div>'+ '<div class="popbtn">'+ '<a class="newsave m-white-btns" href="javascript:;" id="addInfo" >保存</a>'+ '<a class="scancel m-gray-btns" href="javascript:;">取消</a>'+ '</

15、div>'+ '</form>',点击【新建】按钮时点击【保存】按钮，所有条件验证成功后ajax传值。以post方式传值，将需要值获取后，填写URL，Data，回调函数，强制转为json格式，本例中的回调函数是验证正确后输出返回值，延时2s后刷新页面/验证成功执行function newSaveCallback() /刷新列表fn var name = $('#name').val(); var city = $('#city').val(); var id_card = $('#id_card').va

16、l(); 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(&#

17、39;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.

18、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->encryptByK

19、ey($request->post('id_card'), Yii:$app->params'securityKey'); $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'

20、$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->fo

21、rmat = yiiwebResponse:FORMAT_JSON; $items = 'code' => $code, 'msg' => $message; return $items;查看效果2.2编辑操作2.2.1编辑时获取当前id数据编辑时同样页面写在js文件中因此也需要通过ajax获取数据库中的信息并在弹层中显示请看js显示代码：/编辑eidtInfo: '<form name="form">'+ '<div class="cnew">'+ &#

22、39;<table>'+ '<tr>'+ '<td align="right" width="134"><em>*</em>员工姓名：</td>'+ '<td><input class="popinput edname" type="text" maxlength="10" name="" id="ed_name" /&

23、gt;</td>'+ '<td align="right" width="118"><em>*</em>工作地点：</td>'+ '<td><input class="popinput edadd" type="text" maxlength="10" name="" id="ed_city" /></td>'+ '

24、;</tr>'+ '<tr>'+ '<td align="right"><em>*</em>身份证号：</td>'+ '<td><input class="popinput edidnum" type="text" maxlength="18" name="" id="edid_card" /></td>'+ &#

25、39;<td align="right"><em>*</em>所属业态：</td>'+ '<td>'+ '<div class="cselect s-down-menu J-down-menu"><div class="s-down-input J-down-input yt">业态一</div><span class="s-down-icon"></span>&l

26、t;ul class="s-down-list J-down-list">'+ '<li>业态一</li><li>业态二</li>' /+ '<li>' + aaa + '</li>'+ '</ul></div>'+ '</td>'+ '</tr>'+ '<tr>'+ '<td align="ri

27、ght"><em>*</em>在职状态：</td>'+ '<td colspan="3"><div class="cselect s-down-menu J-down-menu"><div class="s-down-input J-down-input st">在职</div><span class="s-down-icon"></span><ul class=&quo

28、t;s-down-list J-down-list"><li>在职</li><li>离职</li></ul></div></td>'+ '</tr>'+ '<tr>'+ '<td align="right"><em>*</em>是否已绑定微信：</td>'+ '<td colspan="3"><div c

29、lass="cselect s-down-menu J-down-menu"><div class="s-down-input J-down-input bd">否</div><span class="s-down-icon"></span><ul class="s-down-list J-down-list"><li>否</li><li>是</li></ul></div><

30、;/td>'+ '</tr>'+ '<tr>'+ '<td align="right ">已绑定openID：</td>'+ '<td><span class="openid opid"></span></td>'+ '<td></td>'+ '<td></td>'+ '</tr>&#

31、39;+ '</table>'+ '</div>'+ '<div class="popbtn">'+ '<a class="edsave m-white-btns" href="javascript:;" id="updateInfo">保存</a>'+ '<a class="scancel m-gray-btns" href="javascript

32、:;">取消</a>'+ '</div>'+ '</form>'因此在点击【编辑】弹层的时候应用ajax向控制器update方法请求需要显示的数据，同样的填写ajax需要的4个参数，需要注意的是返回值应该是所需要的数据（当前id的数据），并将获取的数据填入相应的节点，如下所示/编辑弹窗-popeditMember: function (classEvent) var btnEvent = classEvent | '.edit' var options = title: "编辑

33、", 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('/admi

34、n/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

35、); $(".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&

36、#39; => $id)->asArray()->one(); $rows'status' = 'Y' ? $rows'status' = '在职' : $rows'status' = '离职' $rows'bind' = 'Y' ? $rows'bind' = '是' : $rows'bind' = '否' $id_cards1 = base64_decode($rows'id

37、_card'); $rows'id_card' = $security->decryptByKey($id_cards1, Yii:$app->params'securityKey'); if ($rows) return $this->toJson('200', $rows); else return $this->toJson('400', '异常'); 返回后结果如下图页面所示2.2.1编辑时保存当前更改后的数据同样的在数据验证成功后执行ajax传值，首先获取所需数据（记得传当

38、前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'

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论