首页html页面调取后台接口 ajax

html页面调取后台接口 ajax

时间: 2023-08-10 13:10:27 浏览: 109

要调用后台接口，可以使用 Ajax 技术。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <h1>{{ message }}</h1> <button @click="getData">获取数据</button> </div> <script> var app = new Vue({ el: '#app', data: { message: '' }, methods: { getData: function () { axios.get('/api/data').then(response => { this.message = response.data; }).catch(error => { console.log(error); }); } } }); </script> </body> </html> ``` 在这个示例中，我们使用了 Vue.js 和 Axios 库来进行 Ajax 请求。当用户点击“获取数据”按钮时，Vue 实例中的 `getData` 方法会被调用。这个方法使用 Axios 发送 GET 请求到 `/api/data` 接口，并在请求成功后将接口返回的数据赋值给 Vue 实例中的 `message` 属性，从而更新页面上的文本内容。需要注意的是，这个示例中的接口地址是 `/api/data`，在实际应用中需要根据后台接口的具体情况进行修改。同时，在实际应用中还需要考虑一些安全性问题，比如跨域请求、CSRF 攻击等。

阅读全文