vue开发记录,vue插件编写与实战

By admin in 4858美高梅 on 2019年4月1日

上海体育地方不上种,金蕊万人捅:

关于

  • 微信公众号:前端呼啦圈(Love-FED)
  • 本身的博客:劳卜的博客
  • 网易专栏:前端呼啦圈

前言

喜爱vue开发的同室肯定晓得awesome-vue
那一个github地址,里面包括了数以千计的vue开源插件,而这几个插件大都来自第二方开发者们,是他俩为vue社区提供了汪洋的技术帮衬和缓解方案。本文立足vue开源的看法,首要为vue开发者讲解编写vue插件的主意和步子,通过理论与实施相结合的法门来强化我们对vue插件编写的认识。

前几天收看群里面有网络好友们问到Jquery
Ajax的(load,post,get,ajax)之间的不同,今后打点了1篇小说出来,希望可以帮到网上好友们,首先大家先来看一些总结的主意,

4858美高梅 1

前言

热衷vue开发的同窗肯定精通awesome-vue
那么些github地址,里面富含了数以千计的vue开源插件,而这个插件大都来自第壹方开发者们,是他们为vue社区提供了大气的技术帮忙和化解方案。本文立足vue开源的视角,首要为vue开发者讲解编写vue插件的法门和步骤,通过理论与执行相结合的章程来强化大家对vue插件编写的认识。

vue插件介绍

这一个措施都以对jQuery.ajax()实行打包以便于大家运用的主意,当然,借使要拍卖千丝万缕的逻辑,依然供给选择jQuery.ajax()的(这几个前边会聊到).

loading.js:

vue插件介绍

一. 插件与组件

在讲课插件从前,大家先是来理解下vue插件和零部件的涉嫌,在大家的vue项目中大家利用组件的效用往往会压倒插件,关系如下图所示:

4858美高梅 2

插件与组件

在尚未包装组件在此以前,假诺不采纳第一方插件,那么很多状态下大家会编写多少个常用的零部件来提供给页面使用,如Alert/Loading组件,而你只怕须要在数不胜数页面中引入并且经过components注册组件,可是像那样使用率很高的组件一般大家目的在于全局注册后一向就能够在相应页面使用,因而大家要求将她们封装成插件,比如像vux那样的ui组件库,即提供了组件功能也提供了1些全局注册的插件。

用一句话总结回顾两者的关联正是:插件能够打包组件,组件能够暴光数据给插件。

1、 load( url, [data], [callback] )
:载入远程 HTML 文件代码并插入至 DOM 中。

import './loading.css'

let Loading = {}
// 避免重复install,设立flag
Loading.installed = false
Loading.install = function (Vue) {
  if (Loading.installed) return
  Vue.prototype.$loading = {}
  Vue.prototype.$loading.show = () => {
    // 如果页面有loading则不继续执行
    if (document.querySelector('#vue-loading')) return
    // 1、创建构造器,定义loading模板
    let LoadingTip = Vue.extend({
      template: `<div id="vue-loading">
                    <div class="loader"></div>
                  </div>`
    })
    // 2、创建实例,挂载到文档以后的地方
    let tpl = new LoadingTip().$mount().$el
    // 3、把创建的实例添加到body中
    document.body.appendChild(tpl)
    // 阻止遮罩滑动
    document.querySelector('#vue-loading').addEventListener('touchmove', function (e) {
      e.stopPropagation()
      e.preventDefault()
    })
    Loading.installed = true
  }
  Vue.prototype.$loading.hide = () => {
    let tpl = document.querySelector('#vue-loading')
    document.body.removeChild(tpl)
  }
}

export default Loading

一. 插件与组件

在授课插件在此之前,我们第三来领会下vue插件和零部件的涉嫌,在我们的vue项目中大家利用组件的频率往往会压倒插件,关系如下图所示:

4858美高梅 3

在未曾包装组件从前,即使不行使第一方插件,那么很多情况下大家会编写多少个常用的组件来提供给页面使用,如Alert/Loading组件,而你可能必要在重重页面中引入并且通过components注册组件,不过像这样使用率很高的零件一般大家期待全局注册后直接就能够在相应页面使用,由此大家需求将她们封装成插件,比如像vux那样的ui组件库,即提供了组件作用也提供了一点全局注册的插件。

4858美高梅,用一句话回顾总结两者的涉嫌就是:插件能够打包组件,组件能够暴光数据给插件。

贰. 插件分类

4858美高梅 4

插件分类

vue插件的编纂方法一般分为四类,如上海体育场所所示。重要注册与绑定机制如下:

export default {
    install(Vue, options) {
        Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性,如:  vue-custom-element
            // 逻辑...
        }

        Vue.directive('my-directive', {  // 2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch
            bind (el, binding, vnode, oldVnode) {
                // 逻辑...
            }
            ...
        })

        Vue.mixin({
            created: function () {  // 3. 通过全局 mixin方法添加一些组件选项,如: vuex
                // 逻辑...
            }
            ...
        })    

        Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法,通过把它们添加到 Vue.prototype 上实现
            // 逻辑...
        }
    }
}

上边代码应用了es六片段语法列出了四种编写插件的不二等秘书籍,而install是挂号插件首要调用的方式,包涵了多个参数(Vue实例和自定义配置属性options),我们得以将上述代码存储到plugins.js中。

url (String): 请求的HTML页的URL地址。

  loading.css:

贰. 插件分类

4858美高梅 5

vue插件的编排方法一般分为四类,如上海体育场地所示。主要注册与绑定机制如下:

export default {
    install(Vue, options) {
        Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性,如:  vue-custom-element
            // 逻辑...
        }

        Vue.directive('my-directive', {  // 2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch
            bind (el, binding, vnode, oldVnode) {
                // 逻辑...
            }
            ...
        })

        Vue.mixin({
            created: function () {  // 3. 通过全局 mixin方法添加一些组件选项,如: vuex
                // 逻辑...
            }
            ...
        })    

        Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法,通过把它们添加到 Vue.prototype 上实现
            // 逻辑...
        }
    }
}

下面代码应用了es陆有的语法列出了四种编写插件的法门,而install是挂号插件首要调用的章程,包蕴了八个参数(Vue实例和自定义配置属性options),我们得以将上述代码存款和储蓄到plugins.js中。

3. 插件使用

在plugins.js中大家无非编写了3个插件的空壳子,假若现在内需全局注册该插件,大家能够在入口文件,比如main.js中登记:

...

import Vue from 'vue'
import MyPlugin from './plugins/plugins.js'

Vue.use(MyPlugin);

...

透过全局方法 Vue.use()
即可使用该插件,其活动会调用install方法。Vue.use会自动阻止注册相同插件数次,届时只会登记贰回该插件。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

#vue-loading {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0
}

.loader {
  position: relative;
  width: 2.5em;
  height: 2.5em;
  transform: rotate(165deg);
}

.loader:before, .loader:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 0.25em;
  transform: translate(-50%, -50%);
}

.loader:before {
  animation: before 2s infinite;
}

.loader:after {
  animation: after 2s infinite;
}

@keyframes before {
  0% {
    width: 0.5em;
    box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
  }
  35% {
    width: 2.5em;
    box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
  }
  70% {
    width: 0.5em;
    box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
  }
  100% {
    box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
  }
}

@keyframes after {
  0% {
    height: 0.5em;
    box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
  }
  35% {
    height: 2.5em;
    box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
  }
  70% {
    height: 0.5em;
    box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
  }
  100% {
    box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
  }
}

/**
 * Attempt to center the whole thing!
 */
html,
body {
  height: 100%;
}

.loader {
  position: absolute;
  top: calc(50% - 1.25em);
  left: calc(50% - 1.25em);
}

三. 插件使用

在plugins.js中大家只是编写了八个插件的空壳子,即便未来内需全局注册该插件,大家能够在进口文件,比如main.js中注册:

...

import Vue from 'vue'
import MyPlugin from './plugins/plugins.js'

Vue.use(MyPlugin);

...

透过全局方法 Vue.use()
即可使用该插件,其机动会调用install方法。Vue.use会自动阻止注册相同插件多次,届时只会登记二次该插件。

vue插件编写方法

上述大家关系了编写插件的四种艺术,接下去我们对那么些一举办教学:

callback (Callback) : (可选参数)
请求完结时(不需固然success的)的回调函数。

  在main.js里面 :

vue插件编写方法

上述咱们提到了编写插件的4种方法,接下去大家对这几个壹举办教学:

壹. 拉长全局方法或性能

export default {
    install(Vue, options) {
        Vue.$myName = '劳卜';
    }
}

在install方法中,大家一向在Vue实例上申明了$myName属性并拓展了赋值,当该插件注册后假如存在Vue实例的地方你都足以获取到Vue.$myName的值,因为其直接绑定在了Vue实例上。

其1法子暗中认可使用 GET
形式来传递的,借使[data]参数有传递数据进去,就会自动转换为POST格局的。jQuery
一.二 中,能够钦赐选拔符,

   import Vue from 'vue';
   import Loading from '@/components/loading'
   Vue.use(Loading)

①. 丰盛全局方法或性质

export default {
    install(Vue, options) {
        Vue.$myName = '劳卜';
    }
}

在install方法中,大家平昔在Vue实例上声称了$myName属性并进行了赋值,当该插件注册后要是存在Vue实例的地点你都得以收获到Vue.$myName的值,因为其直接绑定在了Vue实例上。

二. 充分全局财富

export default {
    install(Vue, options) {
        Vue.directive('focus', {
            bind: function() {},

            // 当绑定元素插入到 DOM 中。
            inserted: function(el, binding, vnode, oldVnode) {

                // 聚焦元素
                el.focus();
            },

            update: function() {},
            componentUpdated: function() {},
            unbind: function() {}
        });
    },
}

丰盛全局财富蕴藏了拉长全局的吩咐/过滤器/过渡等,上方代码大家因此Vue.directive()添加了一个大局指令v-focus,其主要包蕴了七种办法,个中inserted代表当绑定成分插入到
DOM
中履行,而el.focus()代表聚焦绑定的成分,这样只要我们在一个input输入框上绑定该指令就会自动举行focus聚焦。

别的directive提供的诀要及用途能够参考:vue开发记录,vue插件编写与实战。vue自定义指令

来筛选载入的 HTML 文书档案,DOM 大校仅插入筛选出的 HTML 代码。语法形如 “url
#some > selector”。

  那样就能够平素在组件里面手动调用啦!

2. 加上全局财富

export default {
    install(Vue, options) {
        Vue.directive('focus', {
            bind: function() {},

            // 当绑定元素插入到 DOM 中。
            inserted: function(el, binding, vnode, oldVnode) {

                // 聚焦元素
                el.focus();
            },

            update: function() {},
            componentUpdated: function() {},
            unbind: function() {}
        });
    },
}

丰裕全局能源蕴藏了拉长全局的通令/过滤器/过渡等,上方代码大家经过Vue.directive()添加了四个大局指令v-focus,其主要含有了三种情势,个中inserted代表当绑定成分插入到
DOM
中举办,而el.focus()代表聚焦绑定的要素,这样壹旦我们在一个input输入框上绑定该指令就会自行实行focus聚焦。

别的directive提供的艺术及用途能够参照:vue自定义指令

3. 丰盛全局mixin方法

export default {
    install(Vue, options) {
        Vue.mixin({
            methods: {
                greetingFn() {
                    console.log('greeting');
                }
            }
        });
    },
}

mixin代表混合的意趣,大家得以全局注册一个混合,其会影响登记之后创造的各类Vue
实例,上方代码注册后会在各样组件实例中添加greetingFn方法,在单文件组件中得以一贯通过this.greetingFn()调用。当然如若实例中设有同名方法,则mixin方法中创制的会被掩盖,同时mixin对象中的钩子将在组件自己钩子此前调用。

以此艺术能够很方便的动态加载一些HTML文件,例如表单。

  调用方法: this.$loading.show(),  this.$loading.hide()

三. 抬高全局mixin方法

export default {
    install(Vue, options) {
        Vue.mixin({
            methods: {
                greetingFn() {
                    console.log('greeting');
                }
            }
        });
    },
}

mixin代表混合的情趣,大家得以全局注册八个掺杂,其会影响登记之后创建的每一个Vue
实例,上方代码注册后会在种种组件实例中添加greetingFn方法,在单文件组件中得以平素通过this.greetingFn()调用。当然假设实例中存在同名方法,则mixin方法中创设的会被遮住,同时mixin对象中的钩子将在组件自己钩子从前调用。

四. 添加实例方法

export default {
    install(Vue, options) {
        Vue.prototype.$myName = '劳卜';
        Vue.prototype.showMyName = value => {
            console.log(value);
        };
    },
}

丰富实例方法是最常用的一种格局,其直接绑定在vue的原型链上,我们能够纪念一下
JS 里的类的概念。实例方法可以在组件内部,通过this.$myMethod来调用。

演示代码:

  因为那么些种类权且规模不大,就只有注册作用,作者一贯把调用写在axios请求拦截器里面,每回请求和呼吁甘休都会调用loading,那样就不要在页面里面手动调用啦。

肆. 加上实例方法

export default {
    install(Vue, options) {
        Vue.prototype.$myName = '劳卜';
        Vue.prototype.showMyName = value => {
            console.log(value);
        };
    },
}

拉长实例方法是最常用的1种艺术,其直接绑定在vue的原型链上,大家得以回看一下
JS 里的类的定义。实例方法能够在组件内部,通过this.$myMethod来调用。

5. 插件封装组件

上面4点只讲解了插件本人的4中编辑方法,并从未关联组件的始末,假诺大家要在组件的底子上编写制定插件,我们得以动用Vue.extend(component)来展开,能够见下方loading插件实例。

$(“.ajax.load”).load(“//www.jb5一.net”,function (responseText,
textStatus, XMLHttpRequest){this;//在此处this指向的是当下的DOM对象,

5. 插件封装组件

上面四点只讲解了插件自己的四中编辑方法,并从未关联组件的始末,假诺大家要在组件的基本功上编制插件,大家得以行使Vue.extend(component)来展开,能够见下方loading插件实例。

loading插件

<!-- loading.vue组件 -->
<template>
    <div class="loading-box" v-show="show">
        <div class="loading-mask"></div>
        <div class="loading-content">
            <div class="animate">
            </div>
            <div class="text">{{text}}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        show: Boolean,
        text: {
          type: String,
          default: '正在加载中...'
        },
    }
}
</script>

以上是多少个loading.vue组件,省略了体制部分,在一贯不包装插件此前,大家只好通过import引入并登记到components对象中才能在页面中央银行使,如:

<template>
    <div>
        <loading :show="true"></loading>
    </div>
</template>
<script>
import Loading from './loading.vue'

export default {
    ...

    components: {
        Loading
    }

    ...
}
</script>

上边大家便来封装一下该器件:

// loading.js
import LoadingComponent from '../components/loading.vue'

let $vm

export default {
    install(Vue, options) {
        if (!$vm) {
            const LoadingPlugin = Vue.extend(LoadingComponent);

            $vm = new LoadingPlugin({
                el: document.createElement('div')
            });

            document.body.appendChild($vm.$el);
        }

        $vm.show = false;

        let loading = {
            show(text) {
                $vm.show = true;

                $vm.text = text;
            },
            hide() {
                $vm.show = false;
            }
        };

        if (!Vue.$loading) {
            Vue.$loading = loading;
        }

        // Vue.prototype.$loading = Vue.$loading;

        Vue.mixin({
            created() {
                this.$loading = Vue.$loading;
            }
        })
    }
}

如上我们新建一个loading.js文件,引入大家的loading.vue组件,然后经过Vue.extend()方法创立了二个构造器LoadingPlugin,其次我们再通过new
LoadingPlugin()成立了$vm实例,并挂载到三个div成分上。最终我们需求通过document.body.appendChild($vm.$el)将其插入到DOM节点中。

当大家创设了$vm实例后,大家能够访问该实例的品质和措施,比如通过$vm.show就足以改变loading组件的show值来决定其出示隐藏。

最终大家通过Vue.mixin或许Vue.prototype.$loading来全局添加了$loading事件,其又带有了show和hide多少个艺术。大家得以平素在页面中选用this.$loading.show()来呈现加载,使用this.$loading.hide()来关闭加载。

即$(“.ajax.load”)[0]
//alert(responseText);//请求重返的内容//alert(textStatus);//请求状态:success,error//alert(XMLHttpRequest);//XMLHttpRequest对象});

loading插件

<!-- loading.vue组件 -->
<template>
    <div class="loading-box" v-show="show">
        <div class="loading-mask"></div>
        <div class="loading-content">
            <div class="animate">
            </div>
            <div class="text">{{text}}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        show: Boolean,
        text: {
          type: String,
          default: '正在加载中...'
        },
    }
}
</script>

如上是二个loading.vue组件,省略了体制部分,在一贯不包装插件此前,大家只能通过import引入并登记到components对象中才能在页面中央银行使,如:

<template>
    <div>
        <loading :show="true"></loading>
    </div>
</template>
<script>
import Loading from './loading.vue'

export default {
    ...

    components: {
        Loading
    }

    ...
}
</script>

上面大家便来封装一下该零件:

// loading.js
import LoadingComponent from '../components/loading.vue'

let $vm

export default {
    install(Vue, options) {
        if (!$vm) {
            const LoadingPlugin = Vue.extend(LoadingComponent);

            $vm = new LoadingPlugin({
                el: document.createElement('div')
            });

            document.body.appendChild($vm.$el);
        }

        $vm.show = false;

        let loading = {
            show(text) {
                $vm.show = true;

                $vm.text = text;
            },
            hide() {
                $vm.show = false;
            }
        };

        if (!Vue.$loading) {
            Vue.$loading = loading;
        }

        // Vue.prototype.$loading = Vue.$loading;

        Vue.mixin({
            created() {
                this.$loading = Vue.$loading;
            }
        })
    }
}

上述大家新建2个loading.js文件,引入咱们的loading.vue组件,然后通过Vue.extend()方法创建了一个构造器LoadingPlugin,其次大家再经过new
LoadingPlugin()创造了$vm实例,并挂载到3个div成分上。最终大家必要经过document.body.appendChild($vm.$el)将其插入到DOM节点中。

当我们成立了$vm实例后,大家得以访问该实例的质量和办法,比如通过$vm.show就能够改变loading组件的show值来支配其出示隐藏。

最终大家经过Vue.mixin或许Vue.prototype.$loading来全局添加了$loading事件,其又带有了show和hide多个点子。我们得以一直在页面中使用this.$loading.show()来呈现加载,使用this.$loading.hide()来关闭加载。

插件发表

插件编写完后大家的指标除了本地引用注册外,或许更期望发表到线上供客人或任何连串选拔,因而大家要求了然插件宣布的不贰秘诀。

注:不知道干什么U奥迪Q伍L写相对路径在FF下会出错,知道的麻烦告诉下。上边包车型大巴get()和post()示例使用的是相对路径,所以在FF下你将会出错并不会看出重临结果。还有get()和post()示例都是跨域调用的,发现传上来后不能够得到结果,所以把运转按钮去掉了。

插件公布

插件编写完后大家的目标除了本土引用注册外,大概更期待公布到线上供客人或任何种类选取,由此大家须要精晓插件发表的不二秘诀。

一. 发表准备

在布告插件前您必要八个npm账号,你能够访问:https://www.npmjs.com/
举行挂号

2、 jQuery.get( url, [data],
[callback] ):使用GET形式来实行异步请求

1. 揭露准备

在公告插件前你要求一个npm账号,你能够访问:
进行注册

二. 公布命令

npm login
cd 目录
npm publish

拥有账号后,你供给在支配台输入npm
login命令来报到你的账号,并且输入邮箱地址。然后打开你的插件目录,允许npm
publish发表。最简易的四个插件目录如下:

参数:

二. 发表命令

npm login
cd 目录
npm publish

怀有账号后,你须要在支配台输入npm
login命令来报到你的账号,并且输入邮箱地址。然后打开你的插件目录,允许npm
publish发表。最简便的八个插件目录如下:

三. 透露目录

├── lib // 插件源码
│   ├── components // 组件目录
│   │   └── loading.vue // 组件文件
│   └── index.js  // 插件入口文件
├── index.js // 入口文件
└── package.json  // 包管理文件

您能够在品种中设置刚刚的loading插件来拓展参考,小编一度发表至npm:

npm install super-loading --save

自然你也能够访问github仓库:https://github.com/luozhihao/super-loading
实行下载。

url (String): 发送请求的UHighlanderL地址.

3. 宣布目录

├── lib // 插件源码
│   ├── components // 组件目录
│   │   └── loading.vue // 组件文件
│   └── index.js  // 插件入口文件
├── index.js // 入口文件
└── package.json  // 包管理文件

您能够在项目中设置刚刚的loading插件来举行参考,笔者曾经昭示至npm:

npm install super-loading --save

自然你也足以访问github仓库:
进行下载。

结语

本文的结尾目标并不是教大家怎么着去编写三个loading插件,而是辅助大家探听在编辑插件的进度中所使用的技能和办法,唯有通晓了技术和章程才能写出各式各种的插件,正所谓水到自然渠成。

data (Map): (可选) 要发送给服务器的数据,以 Key/value
的键值对方式表示,会做为QueryString附加到请求UKugaL中。

结语

正文的末梢指标并不是教我们怎样去编写贰个loading插件,而是帮忙我们精通在编排插件的进程中所使用的技术和艺术,唯有明白了技能和方式才能写出丰富多彩的插件,正所谓水到自然渠成。

callback (Function): (可选)
载入成功时回调函数(唯有当Response的回到状态是success才是调用该方法)。

那是叁个大约的 GET 请求功效以代替复杂 $.ajax
。请求成功时可调用回调函数。假诺急需在阴差阳错开上下班时间实施函数,请使用 $.ajax。

演示代码:

$.get(“./Ajax.aspx”, {Action:”get”,Name:”lulu”}, function (data,
textStatus){//重回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.this;
//
在此处this指向的是Ajax请求的挑选配置消息,请参见下图alert(data);//alert(textStatus);//请求状态:success,error等等。

自然那里捕捉不到error,因为error的时候根本不会运行该回调函数//alert(this);});

点击发送请求:

jQuery.get()回调函数里面包车型大巴 this ,指向的是Ajax请求的抉择配置消息:

3、 jQuery.post( url, [data],
[callback], [type] ) :使用POST格局来拓展异步请求

参数:

url (String) : 发送请求的U猎豹CS陆L地址.

data (Map): (可选) 要发送给服务器的数目,以 Key/value
的键值对方式表示。

callback (Function): (可选)
载入成功时回调函数(只有当Response的归来状态是success才是调用该方法)。

type (String) : (可选)官方的注明是:Type of data to be
sent。其实应当为客户端请求的类型(JSON,XML,等等)

那是一个简易的 POST 请求成效以替代复杂 $.ajax
。请求成功时可调用回调函数。若是急需在阴差阳错开上下班时间实施函数,请使用 $.ajax。

示范代码:

Ajax.aspx:

Response.ContentType = “application/json”;Response.Write(“{result: ‘” +
Request[“Name”] + “,你好!(那音信来源于服务器)’}”);

jQuery 代码:

$.post(“Ajax.aspx”, { Action: “post”, Name: “lulu” },function (data,
textStatus){// data 能够是 xmlDoc, jsonObj, html, text, 等等.//this; //
这几个Ajax请求的挑叁拣肆配置新闻,请参考jQuery.get()说起的thisalert(data.result);},
“json”);

点击提交:

此地安装了请求的格式为”json”:

如若您设置了请求的格式为”json”,此时您未曾设置Response回来的ContentType
为:Response.ContentType = “application/json”;
那么你将不可能捕捉到重返的多寡。

留意一下,alert(data.result);
由于设置了Accept报头为“json”,那里重临的data便是贰个对象,并不须求用eval()来更换为目的。

4、 jQuery.getScript( url, [callback] )
: 通过 GET 情势呼吁载入并执行多少个 JavaScript 文件。

参数

url (String) : 待载入 JS 文件地方。

callback (Function) : (可选) 成功载入后回调函数。

jQuery 1.二 版本在此之前,getScript 只可以调用同域 JS 文件。
①.2中,您能够跨域调用 JavaScript 文件。注意:Safari 贰或更早的本子不能在大局成效域中协同实施脚本。尽管通过 getScript
加入脚本,请进入延时函数。

其1措施能够用在比如当只有编辑器focus()的时候才去加载编辑器需求的JS文件.下边看①些示范代码:

加载并实施 test.js。

jQuery 代码:

$.getScript(“test.js”);

加载并推行 Ajax伊芙nt.js ,成功后展现新闻。

jQuery 代码:

$.getScript(“Ajax伊夫nt.js”, function(){alert(“Ajax伊芙nt.js
加载实现并实施达成.你再点击上边的Get或Post按钮看看有怎样两样?”);});

jQuery Ajax 事件

Ajax请求会发生多少例外的事件,大家能够订阅那个事件并在中间处理我们的逻辑。在jQuery那里有三种Ajax事件:局地事件
和 全局事件。

部分事件正是在历次的Ajax请求时在情势钦点义的,例如:

$.ajax({beforeSend: function(){// Handle the beforeSend event},complete:
function(){// Handle the complete event}// …});

大局事件是每一回的Ajax请求都会接触的,它会向DOM中的全数因素广播,在上头
getScript() 示例中加载的脚本正是大局Ajax事件。全局事件能够如下概念:

$(“#loading”).bind(“ajaxSend”,
function(){$(this).show();}).bind(“ajaxComplete”,
function(){$(this).hide();});

或者:

$(“#loading”).ajaxStart(function(){$(this).show();});

咱俩能够在特定的乞求将全局事件禁止使用,只要设置下 global 选项就足以了:

$.ajax({url: “test.html”,global: false,//
禁止使用全局Ajax事件.// …});

上述这篇详谈jQuery
Ajax(load,post,get,ajax)的用法便是小编分享给我们的全体内容了,希望能给我们二个参考,也愿意我们多多帮助脚本之家。

你或者感兴趣的小说:

  • jQuery中ajax的load()与post()方法实例详解
  • jQuery中ajax – get()
    方法实例详解
  • jquery中get,post和ajax方法的选择小结
  • jquery 读取页面load get post ajax
    多样艺术代码写法
  • jQuery中Ajax的get、post等情势详解
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法计算
  • jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
  • jQuery中ajax的get()方法用法实例
  • jQuery中ajax的load()方法用法实例

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有