vueJs ajax

来源：互联网发布：dnf防卡优化补丁2017 编辑：程序博客网时间：2024/05/27 20:36

一、动态参数显示
ajax异步请求后，接收到返回的data参数并显示在前端
1.1 引入js，也加入了jQuery

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/vue.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/jquery-2.1.3.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code><ul class="pre-numbering" style="opacity: 0.0441084;"><li>1</li><li>2</li></ul>

1.2 html

<code class="hljs handlebars has-numbering"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"app"</span>></span>    <span class="hljs-tag"><<span class="hljs-title">p</span>></span></span><span class="hljs-expression">{{ <span class="hljs-variable">message</span> }}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">p</span>></span>    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">v-on:click</span>=<span class="hljs-value">"showData"</span>></span>显示数据<span class="hljs-tag"></<span class="hljs-title">button</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span></span></code><ul class="pre-numbering" style="opacity: 0.0441084;"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

1.3 JS
注意：这里JS一定要放在$(function() {})里面，或者是写到body里面

<code class="hljs javascript has-numbering">            <span class="hljs-keyword">new</span> Vue({                el: <span class="hljs-string">'#app'</span>,                data: {                    message: <span class="hljs-string">''</span>                },                methods: {                    showData: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>                        <span class="hljs-keyword">var</span> _self = <span class="hljs-keyword">this</span>;                        $.ajax({                            type: <span class="hljs-string">'GET'</span>,                            url: <span class="hljs-string">'...'</span>,                            success:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span> {</span>                                _self.message = <span class="hljs-built_in">JSON</span>.stringify(data);                            }                        });                    }                }            })</code><ul class="pre-numbering" style="opacity: 0.0441084;"><li></li></ul>

二、动态列表显示
开始展示一个空白列表，ajax异步请求后，接收到返回的data列表信息并显示

2.1 引入js，也加入了jquery

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/vue.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/js/jquery-2.1.3.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code><ul class="pre-numbering" style="opacity: 0.0441084;"><li></li></ul>

2.2 html

<code class="hljs handlebars has-numbering"><span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"app"</span>></span>    <span class="hljs-tag"><<span class="hljs-title">table</span>></span>        <span class="hljs-tag"><<span class="hljs-title">thead</span>></span>        <span class="hljs-tag"><<span class="hljs-title">tr</span>></span>            <span class="hljs-tag"><<span class="hljs-title">th</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">'width:3%; text-align: left'</span>></span>ID<span class="hljs-tag"></<span class="hljs-title">th</span>></span>            <span class="hljs-tag"><<span class="hljs-title">th</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">'width:5%; text-align: left'</span>></span>名称<span class="hljs-tag"></<span class="hljs-title">th</span>></span>            <span class="hljs-tag"><<span class="hljs-title">th</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">'width:10%; text-align: left'</span>></span>条形码<span class="hljs-tag"></<span class="hljs-title">th</span>></span>            <span class="hljs-tag"><<span class="hljs-title">th</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">'width:10%; text-align: left'</span>></span>简称<span class="hljs-tag"></<span class="hljs-title">th</span>></span>        <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>        <span class="hljs-tag"></<span class="hljs-title">thead</span>></span>        <span class="hljs-tag"><<span class="hljs-title">tbody</span>></span>            <span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">v-for</span>=<span class="hljs-value">"goods in goodsList"</span>></span>                <span class="hljs-tag"><<span class="hljs-title">td</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">goods.id</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">td</span>></span>                <span class="hljs-tag"><<span class="hljs-title">td</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">goods.name</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">td</span>></span>                <span class="hljs-tag"><<span class="hljs-title">td</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">goods.barcode</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">td</span>></span>                <span class="hljs-tag"><<span class="hljs-title">td</span>></span></span><span class="hljs-expression">{{<span class="hljs-variable">goods.shortName</span>}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-title">td</span>></span>            <span class="hljs-tag"></<span class="hljs-title">tr</span>></span>        <span class="hljs-tag"></<span class="hljs-title">tbody</span>></span>    <span class="hljs-tag"></<span class="hljs-title">table</span>></span>    <span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">v-on:click</span>=<span class="hljs-value">"nameSearch()"</span>></span>查询<span class="hljs-tag"></<span class="hljs-title">button</span>></span><span class="hljs-tag"><<span class="hljs-title">br</span>></span><span class="hljs-tag"><<span class="hljs-title">br</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span></span></code><ul class="pre-numbering" style="opacity: 0.0441084;"><li></li></ul>

2.3 JS

<code class="hljs javascript has-numbering">            <span class="hljs-keyword">var</span> goodsVue = <span class="hljs-keyword">new</span> Vue({                el: <span class="hljs-string">'#app'</span>,                data: {                    goodsList : <span class="hljs-string">''</span>                },                methods: {                    nameSearch: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>                        <span class="hljs-keyword">var</span> _self = <span class="hljs-keyword">this</span>;                        $.ajax({                            type: <span class="hljs-string">'GET'</span>,                            url: <span class="hljs-string">'...'</span>,                            success:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span> {</span>                                _self.goodsList = data;                            }                        });                    }                }            })</code>

0 0