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代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
随机推荐
- ubuntu14下python环境的配置
1.安装build依赖包(一些包需要用pip编译) sudo apt-get install python-dev 2.安装pip包管理工具 sudo apt-get install python-p ...
- Android自动化测试之环境搭建
Android自动化测试之环境搭建 一.Android-sdk介绍 SDK(Software development kit)软件开发工具包.被软件开发工程师用于为特定的软件包.软件框架.硬件平台. ...
- hdu 1560 DNA sequence(迭代加深搜索)
DNA sequence Time Limit : 15000/5000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total ...
- JSP 语法/标签
┣1.declaration Declaration定义了JSP脚本语言使用的变量和函数,这类似于Java中定义全局变量,或可以把它想像成pascal编程语言中的单元文件的interface部分.声明 ...
- MySQL常用命令总结2
USE db_name; //使用(打开)数据库 SELECT DATABASE(); //查看当前打开的数据库 CREATE TABLE tb_name( column_name data_type ...
- GridView规则显示图片
首先是自定义的GridVIew,ListView嵌套GridVIew时必须自定义GridVIew,不嵌套时可以不用.这里的GridView会根据图片多少自动调节大小 //自定义的GridView ,以 ...
- ActionBar的简单使用
只简单实现了一下ActionBar的使用,在右上角添加两个ActionBar,在左上角实现默认的返回箭头,类似于微信朋友圈的 这是MainActivity的代码: public class MainA ...
- 【转】你必须了解的Session的本质
有一点我们必须承认,大多数web应用程序都离不开session的使用.这篇文章将会结合php以及http协议来分析如何建立一个安全的会话管理机制.我们先简单的了解一些http的知识,从而理解该协议的无 ...
- 4-20ma电流信号转0-5v()
源:4-20ma电流信号转0-5v 电压转电流电路原理图(0-5V转4-20mA) 4mA-20mA转0-5v电路问题,LM324一直输出10V
- linux操作命令实验
实验内容:文件操作与用户操作实验 实验设备(环境):电脑.Vmware WorkStation 实验步骤: 一.创建新用户bob 目的:练习useradd命令 二.为新用户bob设置口令 目的:练习p ...