laravel 中如何使用ajax和vue總結(jié)
最近寫(xiě)一個(gè)項(xiàng)目是基于laravel框架的，這個(gè)框架傳言是為藝術(shù)而創(chuàng)作的優(yōu)雅框架，簡(jiǎn)潔分明的風(fēng)格，很吸引我，所以最近研究比較多。本次就是基于該框架然后將Vue插件加入實(shí)現(xiàn)一定的功能，vue插件本身強(qiáng)大，具體不說(shuō)了，有興趣的同學(xué)可以去官網(wǎng)https://cn.vuejs.org/。laravel 本身php頁(yè)面是用blade引擎，渲染數(shù)據(jù)格式：
{{msg}}
但是熟悉Vue渲染的同學(xué)知道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>
以下是本人自己寫(xiě)的代碼：
<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}}
學(xué)期：@{{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>
有時(shí)候我們可能向帶有鏈接的地方插入Vue數(shù)據(jù)值作為參數(shù)，但是熟悉Vue的同學(xué)知道Vue是mustache 語(yǔ)法不能作用在 HTML 特性上，遇到這種情況應(yīng)該使用 v-bind 指令：
另外一種思路是使用v-on:click。
<a v-on:click="show(course)">
Vue實(shí)例代碼：
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實(shí)現(xiàn)數(shù)據(jù)的綁定。
最重要的是我吃了很長(zhǎng)的時(shí)間的慣性思維的虧，認(rèn)為使用ajax發(fā)送請(qǐng)求都是同樣的模板。
但是在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!')
}
});
};
如果你的頁(yè)面沒(méi)有看到一個(gè)CSRF，可以在頁(yè)面頭部加入
<meta name="_token" content="{{ csrf_token() }}"/>
這樣就可以請(qǐng)求成功。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要分享了PHP抽獎(jiǎng)算法程序設(shè)計(jì)，抽獎(jiǎng)在日常生活中大家都會(huì)接觸到，用php如何實(shí)現(xiàn)抽獎(jiǎng)算法，需要了解的朋友可以參考一下2015-10-10
這篇文章主要介紹了Yii2中cookie用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了Yii2中cookie的設(shè)置、讀取、配置等相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
PHP 數(shù)組遍歷foreach語(yǔ)法結(jié)構(gòu)及實(shí)例
下面小編就為大家?guī)?lái)一篇PHP 數(shù)組遍歷foreach語(yǔ)法結(jié)構(gòu)及實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
這篇文章主要介紹了PHP實(shí)現(xiàn)在線閱讀PDF文件的方法，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-06-06
php圖片水印添加、壓縮、剪切的封裝類(lèi)實(shí)現(xiàn)
這篇文章主要介紹了php圖片水印添加，壓縮，剪切的封裝類(lèi)實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-09-09
這篇文章主要介紹了ThinkPHP框架下微信支付功能總結(jié)踩坑筆記,結(jié)合實(shí)例形式總結(jié)分析了thinkPHP微信支付功能開(kāi)發(fā)過(guò)程中遇到的各種問(wèn)題與解決方法,需要的朋友可以參考下2019-04-04
前些日子一個(gè)朋友丟了個(gè)shell給我，讓我?guī)兔饷埽蜷_(kāi)源碼看了下寫(xiě)著是 “神盾加密” , 牛逼閃閃的樣子、 百度下發(fā)現(xiàn)神盾是個(gè)很古老的東西，最后一次更新是在 2012-10-09。和他相似的另一款是phpjm，有人說(shuō)是神盾抄襲phpjm的，這些都不是我們所要關(guān)心的問(wèn)題、phpjm一直在更新，而神盾貌似不搞了，我們分析下神盾，順便寫(xiě)成工具，方便大家使用(因?yàn)樗桓?，所以就不用?dān)心解密工具失效問(wèn)題了)。2014-06-06
這篇文章主要介紹了ThinkPHP實(shí)現(xiàn)一鍵清除緩存方法,需要的朋友可以參考下2014-06-06
CI分頁(yè)類(lèi)首頁(yè)、尾頁(yè)不顯示的解決方法
這篇文章主要介紹了CI分頁(yè)類(lèi)首頁(yè)、尾頁(yè)不顯示的解決方法,結(jié)合實(shí)例形式較為詳細(xì)的分析說(shuō)明了CI框架分頁(yè)代碼的運(yùn)行原理與顯示首頁(yè)、尾頁(yè)的具體方法,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了詳解php框架Yaf路由重寫(xiě)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06