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

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

分类:js_jQuery答疑 - 常见问题 · 发布时间:2021-10-07 12:06 · 阅读:7110

因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,下面通过本文给大家分享lavarel框架中使用ajax提交表单的方法,一起看看吧

laravel简介:

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

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

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

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

 

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+'
'+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初学者奉上.

标签:
lavarel ajax 表单

相关文章

AJAX乱码与异步同步以及封装jQuery库实现步骤详解

这篇文章主要介绍了异步通信技术AJAX乱码问题、异步与同步、手动封装一个jQuery库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

AJAX的跨域问题解决方案

跨域简单的说,就是从一个域名的网页去访问另一个域名网页的资源,下面这篇文章主要给大家介绍了关于AJAX的跨域问题解决的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

利用Ajax实现智能回答的机器人示例代码

这篇文章主要介绍了利用Ajax实现智能回答的机器人,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

ajax、axios和fetch之间优缺点重点对比总结

今天被问到用没用过ajax axios,我回答经常用axios,但ajax用的比较少,下面这篇文章主要给大家介绍了关于ajax、axios和fetch之间优缺点重点对比总结的相关资料,需要的朋友可以参考下

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

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

返回分类 返回首页