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中找要执行的方法,这样感觉高雅多了。