VueJS ajax|七日打卡

vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。

vue-resource的github: github.com/pagekit/vue…

axios

什么是axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

注: Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。

axios的github:github.com/axios/axios

中文说明: www.kancloud.cn/yunye/axios…

axios的语法

get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?id=12')
  .then(response=>{
    console.log(response);
  })
  .catch(error=>{
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      id: 12
    }
  })
  .then(response=>{
    console.log(response);
  })
  .catch(error=>{
    console.log(error);
  });

post请求

axios.post('/user', {
    id: 12,
    username:"hongchen"
  })
  .then(response=>{
    console.log(response);
  })
  .catch((error=>{
    console.log(error);
  });

axios的使用

需求:使用axios发送异步请求给ServletDemo01,并在页面上输出内容

步骤:

创建ServletDemo01
把axios和vue导入项目引入到页面
使用get(), post() 请求

html页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用axios发送异步请求</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <!--
            目标:当页面加载的时候，发送异步请求给ServletDemo01，
            获取响应数据，展示到id为msg的div中
        -->
        <div id="msg" v-text="message"></div>
    </div>
    <script>
        var vue = new Vue({
           el:"#app",
           data:{
               message:""
           },
            created(){
                //使用axios发送异步请求,异步的get请求可以通过url地址携带数据
                /*axios.get("/demo01?id=12&username=hongchen").then(response =>{
                    //response就是服务器端的响应, response.data才是我们想要获取的响应体的数据
                    console.log(response.data)
                    this.message = response.data
                })*/

                //异步的get请求，还能通过json格式携带数据
                /*axios.get("/demo01",{
                    params:{
                        id:12,
                        username:"hongchen"
                    }
                }).then(response=>{
                    //拿到响应体的数据赋值给message
                    this.message = response.data
                })*/

                //axios发送异步的post请求，并且携带请求参数,post方式也可在url后面携带请求参数
                /*axios.post("/demo01?id=13&username=bo").then(response=>{
                    //拿到响应体的数据赋值给message
                    this.message = response.data
                })*/

                //axios发送异步的post请求，使用json格式携带请求参数
                axios.post("/demo01",{id:14,username:"bo"}).then(response=>{
                    //拿到响应体的数据赋值给message
                    this.message = response.data
                })
            }
        });
    </script>
</body>
</html>

ServletDemo01的代码

import com.bo.utils.JsonUtils;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Map;

/**
 * 包名:${PACKAGE_NAME}
 *
 * 日期2021-01-13  11:01
 */
@WebServlet("/demo01")
public class ServletDemo01 extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        doGet(request, response);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        //获取"name=value&name=value"类型的参数
        /*String id = request.getParameter("id");
        String username = request.getParameter("username");*/

        //获取json类型的请求参数
        Map user = JsonUtils.parseJSON2Object(request, Map.class);

        response.setContentType("text/html;charset=UTF-8");

        response.getWriter().write("你好世界:"+user.get("id")+","+user.get("username"));
    }
}

小结

get方式携带请求参数，以及post方式通过url携带请求参数，实际上携带给服务器的参数的格式是"name=value&name=value&name=value", 服务器接收到这种格式的请求参数的时候，可以使用request的getParameter(name)或者getParameterValues(name)或者getParameterMap()方法获取请求参数
post方式通过json格式携带请求参数，那么提交给服务器的参数的格式是{name:value,name:value},服务器就无法通过以前的getParameter(name)等方法获取请求参数。那么服务器要通过解析json获取，我们直接使用工具类就行了