Vue.js 学习笔记 十二 Vue发起Ajax请求

首先需要导入vue-resource.js，可以自己下载引入，也可以通过Nuget下载，它依赖于Vue.js。

全局使用方式：

Vue.http.get(url,[options]).then(successCallback,errorCallback);

Vue.http.post(url,[body],[options]).then(successCallback,errorCallback);

私有使用方式：

this.$http.get(url,[body],[options]).then(successCallback,errorCallback);

this.$http.post(url,[body],[options]).then(successCallback,errorCallback);

url和successCallback是一定要有的。

 

c# 示例：

后台定义一个/Home/VueAjaxData路由，返回一个Json对象。

public ActionResult VueAjaxData()
        {
            VueAjaxDataModel model = new VueAjaxDataModel();
            model.id = 1001;
            model.name = "张三";
            return Json(model,JsonRequestBehavior.AllowGet);
        }

页面上用get,post方式分别调用

"divApp">
        "button" value="发起Get/Ajax请求" v-on:click="getInfo" />

        "button" value="发起Post/Ajax请求" v-on:click="postInfo" />

 

var v = new Vue({
            el: '#divApp',
            data: {
            },
            methods: {
                getInfo() {
                    this.$http.get('/Home/VueAjaxData').then(function (result) {
                        //result是返回的response对象
                        console.log(result);
                        //通过result.body可以获取返回成功的数据
                        console.log(result.body);
                        //通过result.status可以获取状态码
                        console.log(result.status);
                    })
                },
                //post请求要注意，有的服务器只接受表单提交数据，因此可以加上第三个参数emulateJSON: true，设置为表单提交
                postInfo() {
                    this.$http.post('/Home/VueAjaxData', {}, { emulateJSON: true }).then(function (result) {
                        //result是返回的response对象
                        console.log(result);
                    })
                }
            }
        })

 

再说一下jsonp调用，这是为了ajax跨域准备的调用方式。

加一个按钮触发调用

 "button" value="发起Jsonp/Ajax请求" v-on:click="jsonpInfo" />

Vue的方法中增加jsonpInfo方法

 jsonpInfo() {
                    this.$http.jsonp('/Home/VueAjaxJsonp', {}).then(result => {
                        //result是返回的response对象
                        console.log(result.body);
                    })
                }

服务器端就需要注意了，jsonp请求默认发过来一个callback参数，用这个参数的值将你要返回的对象用()包起来，前端就能正确获取到内容。

 public ActionResult VueAjaxJsonp(string callback)
        {
            VueAjaxDataModel model = new VueAjaxDataModel();
            model.id = 1001;
            model.name = "张三";
            string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(model);
            return Content(callback+"(" + strJson + ")");
        }

为什么要这样，建议看一下jsonp的原理，这里不多做说明。

如果不需要跨域，就用不上jsonp了。

那么如果想自定义这个callback的属性名，想传其他参数的话，可以这样做

jsonpInfo() {
                    var param = { "id": 2, "name": "李四" };
                    this.$http.jsonp('/Home/VueAjaxJsonp', { params: param, jsonp:'myCallback' }).then(result => {
                        //result是返回的response对象
                        console.log(result.body);
                    })
                }

 public ActionResult VueAjaxJsonp(string myCallback,string id,string name)
        {
            VueAjaxDataModel model = new VueAjaxDataModel();
            model.id = int.Parse(id);
            model.name = name;
            string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(model);
            return Content(myCallback + "(" + strJson + ")");
        }

因为我用的是MVC，所以Action里直接定义同名参数就行了，不用MVC的话，也可以通过Request["id"]这样来获取，这里就不多说了。

上一篇

Vue.js 学习笔记 十一 自定义指令

下一篇

Vue.js 学习笔记 十三 自定义组件

转载于:https://www.cnblogs.com/luyShare/p/11558409.html