tp5使用ajax实现异步添加数据功能

ajax异步无刷新处理数据的用户体验还是不错的，在我们的项目开发中算是经常使用到的一个知识点。在开发一个兑换码的项目当中，当时是因为每次添加兑换码都会跳转这样非常浪费时间，所以做成了ajax异步添加，我们平常用到的可能都是ajax异步删除、异步修改，异步添加可能稍微少点，下面看看我们的处理逻辑和核心代码吧。

前端js代码如下：

<script type="text/javascript">
 function adddhm(){
 var oid=$("input[name='oid']").val();
 var uname=$("input[name='uname']").val();
 var dhm=$("input[name='dhm']").val();
 var _class=$("select[name='class']").val();
 var otime=$("input[name='otime']").val();
 if(!oid){
 alert('订单号不能为空！');
 return false;
 }
 if(!uname){
 alert('用户名不能为空！');
 return false;
 }
 if(!dhm){
 alert('兑换码不能为空！');
 return false;
 }
 if(!_class){
 alert('适用课程不能为空！');
 return false;
 }
 if(!otime){
 alert('下单时间不能为空！');
 return false;
 }
 $.ajax({
 type:"POST",
 data:{oid:oid,uname:uname,dhm:dhm,class:_class,otime:otime},
 url:"{:url('add')}",
 success:function(data){
 alert(data.msg);
 }
 });
 $("#myform")[0].reset() ;
 return false;
 }
 </script>

下面是我们接受到数据后的添加逻辑：

public function add()
 {
 if(request()->isPost()){
 $_data=input('post.');
 $data=array();
 foreach ($_data as $k => $v) {
 $data[$k]=trim($v);
 }
 $validate = validate('dhm');
 if(!$validate->check($data)){
 $msg=$validate->getError();
 return json(['error'=>2,'msg'=>$msg]);
 }
 $add=db('dhm')->insert($data);
 if($add){
 return json(['error'=>0,'msg'=>'添加成功！']);
 }else{
 return json(['error'=>1,'msg'=>'添加失败，请重新添加！']);
 }
 return;
 }
 return view();
 }

其实很多朋友刚入门的时候会感觉很复杂，建议先从前端基础知识学着走哦