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 相关文章推荐
生成静态页面的PHP类
Jul 15 PHP
使用eAccelerator加密PHP程序
Oct 03 PHP
php 获取远程网页内容的函数
Sep 08 PHP
php中理解print EOT分界符和echo EOT的用法区别小结
Feb 21 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
May 18 PHP
php数组比较实现查找连续数的方法
Jul 29 PHP
PHP使用GD库输出汉字的方法【测试可用】
Nov 10 PHP
PHP Post获取不到非表单数据的问题解决办法
Feb 27 PHP
PHP安装BCMath扩展的方法
Feb 13 PHP
php反射学习之不用new方法实例化类操作示例
Jun 14 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
Apr 14 PHP
php实现JWT验证的实例教程
Nov 26 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
PHP中MD5函数使用实例代码
2008/06/07 PHP
使用URL传输SESSION信息
2015/07/14 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
php的扩展写法总结
2019/05/14 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python中__name__的使用实例
2015/04/14 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python正规则表达式学习指南
2016/08/02 Python
python判断完全平方数的方法
2018/11/13 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
python函数的万能参数传参详解
2019/07/26 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
护士自荐信怎么写
2013/10/18 职场文书
年度考核自我鉴定
2014/03/19 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书