Lavarel框架中使用ajax提交表单的方法

 更新时间:2016年12月23日 15:59:21   作者:yangchaojie  
因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,下面通过本文给大家分享lavarel框架中使用ajax提交表单的方法,一起看看吧

laravel简介:

Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来;它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁、富于表达力。“开发”应当是一项富有创造性的脑力劳动,而不是枯燥的“垒代码“。

开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加。

在网上看了很多的解决方式,我是用下面这种方法解决的:

1,首先在模板里面加上一个meta  :

<meta name="_token" content="{{ csrf_token() }}"/> 

2,然后在ajax方法里面加

headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},

这是ajax的方法,发现了很好用的jquery的函数,$().serialize()和$().serializeArray(),代码中我用的是后者,可以获取form表单中的数据,并且能直接通过ajax传输,简直太神奇了!!!(孤陋寡闻让大家见笑了)

$(form[1]).submit(function(event){
    var data = $(form[1]).serializeArray();
    // console.log(data);
    $.ajax({
      type:'post',
      url:'/basic',
      data:data,
      headers: {
  'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
      success:function(msg){
        if (msg) {
          $('.basicEdit').hide();
          $('.basicShow').show();
          $('.basicShow span').html(data[1].value+' | '+data[2].value+' | '+data[3].value+' | '+data[4].value+'<br>'+data[5].value+' | '+data[6].value+' | '+data[7].value);
        }
      },
    });
    // event.preventDefault();
    return false;
  });

3然后在控制器方法中获取数据了,直接$req->你的表单name就行了.

public function basic(Request $req){
   // return $req->gender;
   $uid = Auth::user()->uid;
   // return $uid;
   // $inf = new \App\Info;
   $inf = Info::where('uid',$uid)->first();
   // return $inf;
   $inf->name = $req->name;
   $inf->gender = $req->gender;
   $inf->topDegre = $req->topDegre;
   $inf->workyear = $req->workyear;
   $inf->tel = $req->tel;
   $inf->email = $req->email;
   return $inf->save()?"ok":"fail";
  }

总结下:

我觉得我说的每一步都是必须得!!!,我的回调函数里面写的代码是把表单里面获得数据重新打印出来了,不需要的可以忽视掉,然后代码将就看吧,一个php初学者奉上.

相关文章

  • Ajax验证用户名是否存在的实例代码

    Ajax验证用户名是否存在的实例代码

    这篇文章主要介绍了Ajax验证用户名是否存在的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 非常简单的Ajax请求实例附源码

    非常简单的Ajax请求实例附源码

    这篇文章为大家推荐了一个非常简单的Ajax请求实例,可以在不重载页面的情况与 Web 服务器交换数据,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 基于ajax html实现文件上传技巧总结

    基于ajax html实现文件上传技巧总结

    这篇文章主要为大家详细总结了基于ajax html实现文件上传技巧,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 非常实用的ajax用户注册模块

    非常实用的ajax用户注册模块

    这篇文章主要为大家详细介绍了非常实用的ajax用户注册模块,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 如何通过axios发起Ajax请求(最新推荐)

    如何通过axios发起Ajax请求(最新推荐)

    Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用。相比于Jquery,axios更加轻量化,只专注于网络数据请求,这篇文章主要介绍了如何通过axios发起Ajax请求,需要的朋友可以参考下
    2022-11-11
  • ajax请求Session失效问题

    ajax请求Session失效问题

    本文由脚本之家小编跟大家分享的ajax请求Session失效问题,感兴趣的朋友一起看看吧
    2015-09-09
  • Ajax回退刷新页面问题的解决办法

    Ajax回退刷新页面问题的解决办法

    这篇文章主要介绍了Ajax回退刷新页面问题的解决办法的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-07-07
  • jQuery使用ajax跨域请求获取数据

    jQuery使用ajax跨域请求获取数据

    跨域这个词应用非常频繁,主要是因为安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容)。本文给大家介绍jQuery使用ajax跨域请求获取数据,需要的朋友可以参考下
    2015-10-10
  • Ajax方式实现定期更新页面某块内容的方法

    Ajax方式实现定期更新页面某块内容的方法

    这篇文章主要介绍了Ajax方式实现定期更新页面某块内容的方法,涉及jquery中load方法Ajax调用及setInterval定时执行的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • javascript对XMLHttpRequest异步请求的面向对象封装

    javascript对XMLHttpRequest异步请求的面向对象封装

    对XMLHttpRequest异步请求的面向对象封装,需要的朋友可以参考下。
    2009-12-12

最新评论