laravel 中使用ajax和vue總結

最近寫一個項目是基於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)" @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/"+course.course_id;
      // console.log(result);
    },
  }

又例以下面的代碼：

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

就是使用v-bind實現數據的綁定。

最重要的是我吃了很長的時間的慣性思惟的虧，認爲使用ajax發送請求都是一樣的模板。

可是在laravel中必須考慮CSRF-TOKEN,感興趣的同窗能夠去laravel學院看看詳細解釋，http://laravelacademy.org。

以下的代碼：

 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() }}"/>

這樣就能夠請求成功。

感謝你們指正！！

祝生活愉快