Vue.js基于$.ajax实现数据的跨域增删查改 - keepfool(4)_H5之家

然后在Global.asax的Application_Start()方法中注册JsonpMediaTypeFormatter：

// 注册JsonpMediaTypeFormatter，让WebAPI能够处理JSONP请求 config.Formatters.Insert(0, new JsonpMediaTypeFormatter(jsonFormatter));

刷新页面，使用JSONP请求也能够正常显示数据了。

注意：使用JSONP时，服务端返回的不再是一段JSON了，而是一个script脚本。

在IE9下查看该页面，simple-grid组件也能正常显示数据：

View Demo

实现POST请求 1. 创建表单对话框

添加一个Create按钮，然后使用modal-dialog组件创建一个表单对话框：

<div>  <div> <div> <button @click="this.show = true">Create</button> </div> </div> <modal-dialog v-bind:show.sync="show"> <header slot="header"> <h1>Create New Customer</h1> </header> <div slot="body"> <div v-show="item.customerId"> <label>Customer Id</label> <input type="text" v-model="item.customerId" disabled="disabled" /> </div> <div> <label>Company Name</label> <input type="text" v-model="item.companyName" /> </div> <div> <label>Contact Name</label> <input type="text" v-model="item.contactName" /> </div> <div> <label>Phone</label> <input type="text" v-model="item.phone" /> </div> <div> <label></label> <button @click="createCustomer">Save</button> </div> </div> </modal-dialog> </div>

注意：在新建Customer时，由于item.customerId为空，所以item.customerId关联的表单不会显示；在修改Customer时，item.customerId关联的表单会显示出来。另外，item.customerId是不可编辑的。

2. 修改Vue实例var demo = new Vue({ el: '#app', data: { show: false, gridColumns: [{ name: 'customerId', isKey: true }, { name: 'companyName' }, { name: 'contactName' }, { name: 'phone' }], gridData: [], apiUrl: 'http://localhost:15341/api/Customers', item: {} }, ready: function() { this.getCustomers() }, methods: { // ... 已省略 createCustomer: function() { var vm = this, callback = function(data) { vm.$set('item', {}) // 添加成功后，重新加载页面数据 vm.getCustomers() } // 将vm.item直接POST到服务端 ajaxHelper.post(vm.apiUrl, vm.item, callback) this.show = false } } })

修改Vue实例的data选项：

添加show属性：用于显示或隐藏表单对话框

修改gridColumns属性：列包含两个属性，name表示列名称，isKey表示列是否为主键列

添加item属性：用于新增Customer或修改Customer

添加createCustomer方法：

createCustomer: function() { var vm = this, callback = function(data) { vm.$set('item', {}) // 添加成功后，重新加载页面数据 vm.getCustomers() } // 将vm.item直接POST到服务端 ajaxHelper.post(vm.apiUrl, vm.item, callback) this.show = false }

View Demo

实现PUT请求 1. 修改sample-grid的template

给主键列添加链接，绑定click事件，事件指向loadEntry方法，loadEntry方法用于加载当前选中的数据。

<template> <table> <thead> <tr> <th v-for="col in columns"> {{ col.name | capitalize}} </th> </tr> </thead> <tbody> <tr v-for="(index,entry) in dataList"> <td v-for="col in columns"> <span v-if="col.isKey"><a href="javascript:void(0)" @click="loadEntry(entry[col.name])">{{ entry[col.name] }}</a></span> <span v-else>{{ entry[col.name] }}</span> </td> </tr> </tbody> </table> </template>

2. 修改simple-grid的methods选项

在simple-grid的methods选项下，添加一个loadEntry方法，该方法调用$.dispatch向父组件派发事件load-entry，并将key作为事件的入参，load-entry是绑定在父组件的事件名称。

Vue.component('simple-grid', { template: '#grid-template', props: ['dataList', 'columns'], methods: { loadEntry: function(key) { this.$dispatch('load-entry', key) } } }) 3. 修改Vue实例的HTML

在Vue实例的simple-grid标签上绑定自定义事件load-entry，load-entry事件指向loadCustomer方法，loadCustomer方法用于加载选中的Customer数据。

我们应将2和3结合起来看，下图阐述了从点击simple-grid数据的链接开始，到最终打开对话框的完整过程：

注意：load-entry是Vue实例的事件，而不是simple-grid组件的事件，尽管load-entry是写在simple-grid标签上的。详情请参考上一篇文章的编译作用域