Post data using ajax in laravel 5
转自:http://www.tuicool.com/articles/2u2mmmu
Post data using ajax in laravel 5 to controller
If you are going to work with ajax data post to controller or route in laravel 5. There are some need to get ajax call work correctly. Your requirement is csrf token. A default feature in Laravel is it’s automatic CSRF security. When you working with forms it’s automatically add a “_token” hidden field to your form. On each post request token will be matched for csrf protection. so it’s one more cool feature provided by laravel 5.
Why on ajax post 500 internal server error laravel :-
If you are using default way for ajax data post, you will get “500 internal server error” in laravel 5. cause you missing csrf token posting with ajax post data. and error reason is token not being matched on post request. so every time a form data is posting require csrf token match. else you will get “500 internal server error” in laravel.

In this article we will explore how to solve 500 internal server error in ajax post or call in laravel or how to Post data using ajax in laravel 5. there are many ways to do this but i am sharing two ways :-
1. Adding on each request
2. globally
How to Post data using ajax in laravel 5 :-
1. Adding on each request and post data to controller :-
In this way we need to add token on each ajax call with data which is posting
view:- add a “login.blade.php” under “resources/views/” and add below code to make a form
<div class="secure">Secure Login form</div>
{!! Form::open(array('url'=>'account/login','method'=>'POST', 'id'=>'myform')) !!}
<div class="control-group">
<div class="controls">
{!! Form::text('email','',array('id'=>'','class'=>'form-control span6','placeholder' => 'Email')) !!}
</div>
</div>
<div class="control-group">
<div class="controls">
{!! Form::password('password',array('class'=>'form-control span6', 'placeholder' => 'Please Enter your Password')) !!}
</div>
</div>
{!! Form::button('Login', array('class'=>'send-btn')) !!}
{!! Form::close() !!}
Now add your ajax call or post data script to your layout footer or in the same file.
<script type="text/javascript">
$(document).ready(function(){
$('.send-btn').click(function(){
$.ajax({
url: 'login',
type: "post",
data: {'email':$('input[name=email]').val(), '_token': $('input[name=_token]').val()},
success: function(data){
alert(data);
}
});
});
});
</script>
Routes:- Add your get and post route to “app/Http/routes.php”
Route::get('account/login', function() {
return View::make('login');
});
Route::post('account/login', 'AccountController@login');
Controller:- add a controller to “app/Http/Controllers” with named “AccountController.php” and add below code
<?php namespace App\Http\Controllers;
use Input;
use Request;
class AccountController extends Controller {
public function login() {
// Getting all post data
if(Request::ajax()) {
$data = Input::all();
print_r($data);die;
}
}
After all make go to your page url and click on button and you get your data has been posted and you will get alert with success.
2. globally way :-
In this way we will add token for globally work with ajax call or post. so no need to send it with data post.
1. Add a meta tag to your layout header:- csrf_token() will be the same as "_token" CSRF token that Laravel automatically adds in the hidden input on every form.
<meta name="_token" content="{!! csrf_token() !!}"/>
2.Now add below code to footer of your layout, or where it will set for globally or whole site pages. this will pass token to each ajax request.
<script type="text/javascript">
$.ajaxSetup({
headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});
</script>
Now make an ajax post request an you are done your data will post successfully.
Post data using ajax in laravel 5的更多相关文章
- Fetching data with Ajax小例子
ajax获取数据示例: 示例1 通过ajax获取txt文件里面的内容示例: <html> <head> <title>Ajax at work</title& ...
- html5 file upload and form data by ajax
html5 file upload and form data by ajax 最近接了一个小活,在短时间内实现一个活动报名页面,其中遇到了文件上传. 我预期的效果是一次ajax post请求,然后在 ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
- jquery ajax中data属性详解
$.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , ...
- 聊天室(下篇)GatewayWorker 与 Laravel 的整合
思路 上一篇大概梳理了一下 GatewayWorker 的基础知识.这篇就来准备整合 GatewayWorker 到 Laravel. GatewayWorker 是基于 Socket 监听的服务器框 ...
- Laravel Vuejs 实战:开发知乎 (10)使用 Select2 优化话题选择
1.添加选择Topic 使用Select2,如何安装Select2 ,具体使用实例 Select2 and Laravel: Ajax Autocomplete 及 Loading data remo ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
- jquery ajax解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
随机推荐
- A convenient way of installing(compiling) VIM with YCM
Ah, while I am still downloading LLVM from github(very slow.. and very large in size). I come with m ...
- java复用类
java复用类英文名叫reusing classes ,重新使用的类,复用的意思就是重复使用的类,其实现方法就是我们平常使用的组合和继承: 1.组合: has-a 的关系 (自我理解:组合就是我们 ...
- Android中购物车的全选、反选、问题和计算价格
此Demo主要解决的是购物车中的全选,反选计算价格和选中的条目个数的问题,当选中几条时,点击反选,会把当先选中的变为不选中,把不选中的变为选中.点击全选会全部选中,再次点击时,变为全部不选中. //- ...
- JS-运动基础(一)续
2.淡入淡出的图片 用变量存储透明度 <title>无标题文档</title> <style> #div1{width:293px; height:220px; b ...
- JS定时器的使用--数码时钟
<title>无标题文档</title> <script> function toDou(n){ if(n<10){ return '0'+n; }else{ ...
- Node.js学习 - Install and Configure
平台:Windows 官网:https://nodejs.org/en/ 下载安装 CMD中运行 1 交互模式 2 命令模式 模块安装 - NPM npm install express #当前目录安 ...
- Excel工作表 表名导出
Technorati 标签: microsoft office,vbs,excel 1: Attribute VB_Name = "表名导出" 2: Sub test() 3: ...
- 转:WebDriver(Selenium2) 处理可能存在的JS弹出框
在自动化测试过程中,有些情况下我们会遇到一些潜在的Javascript弹出框.(即某些条件下才会出现,不是固定出现),然后如果当这种弹出框出现,我们没有加以处理,WebDriver将无法进行下一步的操 ...
- 详细的css命名规则,专业点吧
头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right cent ...
- Eclipse配置
下载地址:http://www.eclipse.org/downloads/ tomcat plugin:http://www.eclipsetotale.com/tomcatPlugin.html# ...