vueJs ajax

最新推荐文章于 2025-06-22 15:24:03 发布

转载最新推荐文章于 2025-06-22 15:24:03 发布 · 1.2k 阅读

本文介绍如何使用Vue.js结合jQuery通过AJAX异步请求实现动态参数及列表显示。涵盖前端页面元素绑定、数据获取及更新流程，适用于快速响应用户操作的数据展示场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、动态参数显示
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>