搜索到
1
篇与
的结果
-
Vue的异步操作 ●在Vue中发送异步请求,本质上还是AJAX。我们可以使用axios这个插件来简化操作! .Vue异步操作●在Vue中发送异步请求,本质上还是AJAX。我们可以使用axios这个插件来简化操作! .●使用步骤：引入axios核心js文件。调用axios对象的方法来发起异步请求。调用axios对象的方法来处理响应的数据。●axios常用方法方法名作用get(请求的资源路径与请求的参数发起GET方式请求post(请求的资源路径，请求的参数)发起POST方式请求then(response)请求成功后的回调函数，通过response获取响应的数据catch(error)请求失败后的回调函数,通过error获取错误信息测试案例： 此测试案例前端页面test.html此测试案例前端页面test.html,后端TestServlet,做此案例需要axios核心js文件下载。 前端页面代码test.html代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异步操作</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/axios-0.18.0.js"></script> </head> <body> <div id="div"> {{name}} <button @click="send()">发送请求</button> </div> </body> <script> new Vue({ el:"#div", data:{ name:"张三" }, methods:{ send(){ // //GET方式请求 // axios.get("testServlet?name="+this.name) // .then(response=>{ // alert(response.data) // }) // .catch(error=>{ // alert(error) // }) //POST方式请求 axios.post("testServlet","name="+this.name) .then(response=>{ alert(response.data) }) .catch(error=>{ alert(error) }) } } }); </script> </html>后端代码TestServlet.html代码： package com; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/testServlet") public class TestServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置请求和响应的编码 request.setCharacterEncoding ( "UTF-8" ); response.setContentType ( "text/html;charset=UTF-8" ); //获取请求参数 String name=request.getParameter ( "name" ); System.out.println (name); //响应客户端请求 response.getWriter ().write ( "请求成功" ); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost ( request, response ); } }
