laravel 中如何使用ajax和vue总结


Posted in PHP onAugust 16, 2017

最近写一个项目是基于laravel框架的,这个框架传言是为艺术而创作的优雅框架,简洁分明的风格,很吸引我,所以最近研究比较多。本次就是基于该框架然后将Vue插件加入实现一定的功能,vue插件本身强大,具体不说了,有兴趣的同学可以去官网https://cn.vuejs.org/。laravel 本身php页面是用blade引擎,渲染数据格式:

{{msg}}

但是熟悉Vue渲染的同学知道Vue的格式是:

<div id="app">
 {{ message }}
</div>

这样就引起了冲突,因此,可以是

@{{msg}}

使用@跳出blade引擎模式。

以下代码摘自是laravel-china@leo作者

<tr v-for="item in services">
 <td>@{{ item.id }}</td>
 <td>@{{ item.name }}</td>
 <td>@{{{ displayHosts(item.hosts) }}}</td>
 <td>@{{{ bool2icon(item.enabled) }}}</td>
 <td>@{{{ bool2icon(item.allow_proxy) }}}</td>
 <td>@{{ item.created_at }}</td>
 <td>
  <a href="javascript:void(0)" rel="external nofollow" @click="edit(item)">{{ trans('admin.edit') }}</a>
 </td>
</tr>

以下是本人自己写的代码:

<li class="wrap" v-for="(course,index) in courses.data">
   <div class="img">
    <a v-on:click="show(course)">
    <img v-bind:src="course.thumblink" 
     width="236" height="124">
    </a>
   </div>
   <div class="coursetitle">
   @{{course.name}}
   </div>
   <div class="lecturer">
    讲师:@{{course.teachername}}
    学期:@{{course.semester}}
    
   </div>
   <div class="price">
    @{{course.price}}元
   </div> 
  <div class="pull-left">
  <button type="button" class="btn btn-success btn-xs" v-on:click="show(course)">详情</button>
  </div>

有时候我们可能向带有链接的地方插入Vue数据值作为参数,但是熟悉Vue的同学知道Vue是mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令:

另外一种思路是使用v-on:click。

<a v-on:click="show(course)"> 

Vue实例代码:
methods:{
 show:function(course)
 {
  // debugger;
  window.location.href="/prices/detail/" rel="external nofollow" +course.course_id;
  // console.log(result);
 },
 }

又例如下面的代码:

<img v-bind:src="course.thumblink" width="236" height="124">

就是使用v-bind实现数据的绑定。

最重要的是我吃了很长的时间的惯性思维的亏,认为使用ajax发送请求都是同样的模板。

但是在laravel中必须考虑CSRF-TOKEN。

如下的代码:

function init_courses()
 {
  // debugger;
  $.ajax({
   type:"post",
   url:'/selectCourse', 
   dataType: 'json',
   data:{result:resul='全部,全部,全部'},
   headers: {
   'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
   },
   success:function(data)
   { 
    mydata.courses=eval(data.result); 
    console.log(mydata.courses);
   },
   error: function(xhr, type){

   alert('Ajax error!')

   }

  });
 };

如果你的页面没有看到一个CSRF,可以在页面头部加入

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

这样就可以请求成功。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
GD输出汉字的函数的分析
Oct 09 PHP
PHP详解ASCII码对照表与字符转换
Dec 05 PHP
PHP中执行cmd命令的方法
Oct 11 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
Nov 03 PHP
php强大的时间转换函数strtotime
Feb 18 PHP
php基于PDO实现功能强大的MYSQL封装类实例
Feb 27 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
May 05 PHP
ThinkPHP 模板引擎使用详解
May 07 PHP
PHP长连接实现与使用方法详解
Feb 11 PHP
PHP扩展mcrypt实现的AES加密功能示例
Jan 29 PHP
php实现银联商务公众号+服务窗支付的示例代码
Oct 12 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
Dec 20 PHP
yii gridview实现时间段筛选功能
Aug 15 #PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
Aug 15 #PHP
Laravel学习教程之IOC容器的介绍与用例
Aug 15 #PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
Aug 15 #PHP
PHP高精确度运算BC函数库实例详解
Aug 15 #PHP
PHP+原生态ajax实现的省市联动功能详解
Aug 15 #PHP
laravel学习笔记之模型事件的几种用法示例
Aug 15 #PHP
You might like
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
SONY SRF-40W电路分析
2021/03/02 无线电
php strtotime 函数UNIX时间戳
2009/01/14 PHP
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
wxPython中listbox用法实例详解
2015/06/01 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
关于安全演讲稿
2014/05/09 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
党员转正申请报告
2015/05/15 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书