vuejs 利用ajax与后台进行交互

Question

<div data-page="conversation" id="conversation">

    <div class="conversation">
        <p class="conversation_title">{{memcon}}</p>
        <span class="conversation_obj">
            <span>任务执行人：</span>
            <span v-for="peopl in people">
                {{peopl}}
            </span><br />
            <span>谈话对象：</span>
            <span>{{peopleObj}}</span>
        </span><br />
        <span>谈话时间：</span>
        <span class="conversation_time">{{memconTime}}</span>
    </div>
    <div class="conversation_content">{{content}}</div>
    <div class="conversation_img">
        <span v-if="imgs.length>0" v-for="img in imgs">
            <img :src="img" alt="" />
        </span>
    </div>
    <div class="comment">
        <textarea rows="3" placeholder="添加文字点评. . . "></textarea>
        <button>提交</button>
    </div>
    <hr />
    <div class="mission_read">
        <span class="left">已读</span>
        <span class="right"><span>{{peoples}}</span>人</span>
        <div class="clear"></div>
        <span class="inlineBlock center portrai" v-for="(portrai,index) in portrait">
            <img :src="portrai" alt="" />
            <span>{{nickname[index]}}</span>
        </span>
    </div>
</div>

module.exports = {

    data:function(){
        return{
            memcon:'第二次谈话',
            memconTime:'2017-06-10',
            content:'城乡社区是社会治理的基本单元。城乡社区治理事关党和国家大政方针贯彻落实，事关居民群众切身利益，事关城乡基层和谐稳定。为实现党领导下的政府治理和社会调节、居民自治良性互动，全面提升城乡社区治理法治化、科学化、精细化水平和组织化程度，促进城乡社区治理体系和治理能力现代化，现就加强和完善城乡社区治理提出以下意见。',
            imgs:['../src/imgs/user-center-banner.jpg','../src/imgs/user-center-banner2.jpg'],
            people:['张三','李四'],
            peopleObj:'王二',
            peoples:'2',
            portrait:['../src/imgs/user-center-banner.jpg','../src/imgs/user-center-banner2.jpg'],
            nickname:['人一','人二']
        }
    }
}

如何利用ajax与后台进行数据交互

Answer 1

用axios，然后

axios.post(url, {
peoples: this.peoples,
nickname: this.nickname
}).then(() => {})

具体看ａｘｉｏｓ文档

Answer 2

你可以写原生ajax啊。
原生写法详细请看：http://www.jianshu.com/p/9b86...或者参考w3cschool

Answer 3

axios或者vue-resource

Answer 4

用jQ啊，配合Vue适合小白。

Answer 5

用vue-resources吧，专门给vue定制的数据交互工具。

Answer 6

http://www.cnblogs.com/jihuaq...看看我的方法吧

Answer 7

我用的是vue-resource 不过这个好像是不维护了 axios也可以

Answer 8

不建议用jq ajax了，用官方推荐的 axios 或者 fetch ，这种新式的http请求利用promise，很方便，非常简单。

Answer 9

example

我这里用了axios

catchData () {
        window.axios.get('https://fir-3-test-2332e.firebaseio.com/notes.json').then(({data}) => {
          this.notes = data;
          this.is_data_loaded = true;
        });
      }