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下删除一篇文章生成的多个静态页面
Aug 08 PHP
php替换超长文本中的特殊字符的函数代码
May 22 PHP
php ci框架验证码实例分析
Jun 26 PHP
解析CI的AJAX分页 另类实现方法
Jun 27 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
Aug 31 PHP
destoon二次开发常用数据库操作
Jun 21 PHP
Yii框架获取当前controlle和action对应id的方法
Dec 03 PHP
php实现MySQL数据库备份与还原类实例
Dec 09 PHP
学习php设计模式 php实现合成模式(composite)
Dec 08 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
Jan 07 PHP
Thinkphp整合微信支付功能
Dec 14 PHP
ThinkPHP5 的简单搭建和使用详解
Nov 15 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读取目录下所有文件的代码
2008/01/07 PHP
php生成mysql的数据字典
2016/07/07 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python实现全角半角转换的方法
2014/08/18 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python os.path模块常用方法实例详解
2018/09/16 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
python如何求100以内的素数
2020/05/27 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
倡议书格式
2014/04/14 职场文书
培训讲师开场白
2015/06/01 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python