tp5自带了success和error方法，但是非常的不友好因为需要等三秒进行跳转，并且不能够异步的判断用户表单的填写。因此我结合jquery以及ajax实现了layui的弹窗及异步请求，这样更加的友好了。
这是一个基本的实现框架可以用来日后的修改，实现的功能：
- 总体功能（用来测试）：两个输入框来输入两个数字，标记为name和test，两个数字都送到tp的后台（控制器去判断），如果相等后台返回json触发layer的弹窗提示返回结果。
- 如果输入为空，那么不刷新在下方提示“总得输入点什么吧”
- 注意不要在控制器的的方法中写echo，否则会和json一起发回去前台的layer解析不出来。
blank.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form role="form" method="" name="form"> <div class="col-lg-6"> <div class="form-group"> <label>测试</label> <input type="text" class="form-control" placeholder="不同失败|相同成功|空提示" name="number" id="number"> </div> <div class="form-group"> <label>测试</label> <input type="text" class="form-control" placeholder="不同失败|相同成功|空提示" name="name" id="name"> </div> <div> <input type="button" class="form-control" value="submit" id="test"> </div> <div class="error alert alert-danger" style="display:none"> 必须要输入点什么吧</div> <div class="success alert alert-success" style="display:none"> 成功了</div> </div> </form> |
备注：
- 使用ajax不需要在form中使用action和method，因为method方法就对应ajax中的type，action请求地址就对应ajax中的url。
- 其实不用写form都可以，因为获取数据是通过id来获取的，如果是表单那么就var a = $(‘id’).val()，如果不是表单也可以通过自定义参数来传递，这个时候在js中的接受就可以使用var url = $(this).attr(‘data-url’);来接收。
- 下面的提示先display:none，js判断输入没有之后，如果出现问题就用.show()来显示错误，这里加了.fadeOut(ms)来逐渐消失提示，如果不需要错误提示逐渐消失可以不使用这个方法，这样就实现了错误提示，也可以使用bootstrap的输入框变色+文字的方式来实现错误提示的功能，只需要用js给表格添加一个类就可以了。
blank.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
$('#test').on('click', function() { // 接收传过来的URL，用属性来接收 var test = $('#number').val(); var name = $('#name').val(); var dataString = 'test='+test+'&name='+name; // alert(test); if(test==''){ $('.error').show().fadeOut(3000); }else{ // alert(dataString); $.ajax({ url:"blank", type:"POST", data:dataString, success:function(data){ $('.success').fadeIn(200).show(); $('.error').fadeOut(200).hide(); var obj = JSON.parse(data); layui.use('layer', function(){ var layer = layui.layer; layer.alert(obj.msg,{icon:obj.icon},function(index){ location.reload();//重载页面 layer.close(index); }); }); } }); } }); |
备注：
- 点击提交按钮，提交按钮不需要用submit，其实直接用bootstrap的button就可以了（我这里没有使用），因为使用的是按钮的点击事件来触发ajax请求，不需要用到表单的属性。
- 通过$(‘#id’).val()把值拿过来
- 然后把值拼接起来格式是val1=aaa&val2=bbb&val3=ccc，这样php通过前面的名字比如val1接收到aaa了。
- 进行判断是否填写了数值，没有填写就显示提示，写了就进行重头戏ajax。
- 首先url请求的地址是blank，由于使用的tp5，这里直接请求controler -> index.php的blank方法就可以，不用写详细的url
- type：使用的是post，把要传的数据拼到了data中，如果使用的是GET就可以直接使用url拼接来传值（不需要data，但是要注意url前面是请求的地址，?后面是传的参数比如index.php?val1=aaa&val2=bbb），但是由于安全性和数据量的原因尽量不要使用GET，多用POST就可以了。
- 接下来就请求了，请求成功了返回success的那个函数，具体用法先看看接下来的php再说明。
index.php(用的是tp5所有这里是controller->index.php)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// 空白页 开发用 public function blank(){ if(session('user')==null){ return redirect('admin/index/login'); } $this->assign([ 'user'=>session('user'), ]); // 业务逻辑部分 ajax测试 if(request()->isPost()){ $postData = input('post.'); // 然后进行业务逻辑的执行，并根据执行结果返回$res来触发相应的返回 if($postData['test']===$postData['name']){ $res=true; }else{ $res='不相等（这里是错误提示）'; } // 根据$res的值返回 if($res === true){ $result['msg'] = '成功了'; $result['icon'] = 1; //icon用于layer创建alert前面的图标 }else{ $result['msg'] = $res; $result['icon'] = 2; } exit(json_encode($result)); } // ajax测试结束 return $this -> fetch('blank'); } |
备注：
- 通过ajax请求后就开始执行php代码了，注意success只是说ajax请求成功了没有，而不是php代码执行成功了没有。
- 使用tp5的方法input(‘.post’)直接将传过来的值放在一个数组里面，然后就可以进行业务逻辑了，比如存在数据库之类的。
- 业务逻辑的执行成功与否返回值放在$res，我这里的逻辑是执行成功直接true，是被的话直接把错误信息存在res中返回给js
- 根据res的值，来拼接要传回去的值，这里使用的是将值放在一个数组中然后exit的时候把这个数组装换成json给ajax接收
php执行完了接下来重新回到js的逻辑上来：
- php返回来的值会自动变成function()中的data，我们JSON.parse(data)来解析JSON字符串，构造由字符串描述的JavaScript值或对象。
- 最后调用layer（我这里使用的是layui所以是这样的使用格式，layer是layui中的一个模块，也可以直接只下载layer模块可以直接使用），把刚才解析好的json的msg和icon传导layer中，完成！
还可以进一步提升代码的高雅：
其实不用每个都写一个方法来执行，可以把需要使用ajax的放在一个Controller中，然后每次post的时候加一个act=’savedata’的值act里面是要进行的命令名字，然后php根据这个post过来的act去找要执行的代码段，要执行的代码段卸载一个switch语句中，就根据这个act传过来的值在switch中找要执行的方法，这样感觉高雅多了。
