VueJS ajax|七日打卡__Vue.js
发布于 6 天前 作者 banyungong 123 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题:https://github.com/xitu/juejin-markdown-themes

theme: juejin highlight:

vue-resource

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

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

axios

什么是axios

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

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

axios的github:https://github.com/axios/axios

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

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,并在页面上输出内容

步骤:

  1. 创建ServletDemo01
  2. 把axios和vue导入项目 引入到页面
  3. 使用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"));
    }
}

小结

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

    版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 剑曼红尘 原文链接:https://juejin.im/post/6917198795470503943

回到顶部