vue---使用axios发送ajax请求

拼搏现实的明天。 2022-12-02 11:00 215阅读 0赞

1：首先导入两个包，一个是Vue的包，一个是axios的包：

2：文本框里面的数据使用双向绑定，这样我Vue里面发送axios请求的时候，可以直接使用文本框中的数据。同时，当我们点击搜索按钮的时候，触发搜索函数 SearchData。并且使用循环的方式，遍历搜索函数返回的列表，构造无序列表。.then会接收服务器发来的json数据，生成response对象，这个对象与js对象不同，而是再js对象的基础上进一步封装。 this.searchData = response.data.data.results，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70_pic_center]

<div id='app'>
            
            <input v-model="inputData" type="text">
            
            <input @click="SearchData" type="button" value="搜索" >
            <ul>
                
                <li v-for='ser in searchData'>
                    {
        {
        ser.title}}
                </li>
            </ul>
        </div>

3：解析SearchData方法：首先axios发送一个json请求，如果请求到数据就执行.then里面的方法，如果请求不到就执行.catch里面的方法，

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <title>数据搜索</title>
    </head>
    <body>
    
        <div id='app'>
            
            <input v-model="inputData" type="text">
            
            <input @click="SearchData" type="button" value="搜索" >
            <ul>
                
                <li v-for='ser in searchData'>
                    {
        {
        ser.title}}
                </li>
            </ul>
        </div>
    
        <script>
            new Vue({
        
                el: '#app',
    
                data: {
        
                    inputData: '',
                    searchData: ''
                },
    
                methods: {
        
                    // 搜索方法
                    SearchData: function () {
        
                        // 发送get请求 给 url服务器
                        // axios.get().then().catch()
                        axios.get('http://ttapi.research.itcast.cn/app/v1_0/search?q=' + this.inputData)
                            // 请求成功: response: 是一个js对象(json转换成js对象中的data)
                            .then((response) => {
        
                                console.log(typeof(response), response)
                                this.searchData = response.data.data.results
                            })
                            // 请求失败
                            .catch((error) => {
        
                                alert(error.data)
                            })
                    }
                }
            })
    
        </script>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzQxNzU3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a358fb8c87ec4481adcb741af377bad5.png