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 相关文章推荐
实现分十页分向前十页向后十页的处理
Oct 09 PHP
php实现的MySQL通用查询程序
Mar 11 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
Apr 08 PHP
分享php分页的功能模块
Jun 16 PHP
PHP aes (ecb)解密后乱码问题
Jun 22 PHP
Thinkphp和onethink实现微信支付插件
Apr 13 PHP
PHP 获取指定地区的天气实例代码
Feb 08 PHP
PHP中单例模式与工厂模式详解
Feb 17 PHP
php求数组全排列,元素所有组合的方法总结
Mar 14 PHP
ThinkPHP防止重复提交表单的方法实例分析
May 10 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
Feb 11 PHP
解决Laravel使用验证时跳转到首页的问题
Nov 17 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
JS常见算法详解
2017/02/28 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
python中的格式化输出用法总结
2016/07/28 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
Python内存映射文件读写方式
2020/04/24 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
python selenium 获取接口数据的实现
2020/12/07 Python
护理毕业生自荐信范文
2013/12/22 职场文书
工程管理专业毕业生自荐信
2014/01/24 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
道歉信范文
2015/05/12 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书