vue写ajax访问springboot后台发送和接收数据

最新推荐文章于 2024-03-26 00:00:00 发布

Ygv587

最新推荐文章于 2024-03-26 00:00:00 发布

阅读量422

点赞数

文章标签： vue.js ajax spring boot

本文链接：https://blog.csdn.net/weixin_43885814/article/details/121221827

版权

vue写ajax访问springboot后台发送和接收数据

遇到的问题
源代码
- 四、html文件
- 五、java文件

遇到的问题

一、没有引入js，以前一直使用公司封装后的，现在自己建立项目忘记引入很多js。

二、JS的顺序不能变，在用 this.$http.get发送请求的时候，因为js的顺序变了，失败过（未找到原因，怀疑函数重名被覆盖）

三、springboot的方法头不知道该加那些。

例如：Model m, @RequestParam(required = true, defaultValue = “1”) Integer id, HttpServletRequest request
这里的model封装数据，request接收数据，

源代码

四、html文件

<!DOCTYPE html>
<html>
<head>
    <title>My first Vue app</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
    <input type="button" @click="helloA()" value="$http.get">
    <input type="button" @click="helloB()" value="$http.post">
    <input type="button" @click="helloC()" value="axios.get">
    <input type="button" @click="helloD()" value="axios.post">

</div>

<script type = "text/javascript">
    var vm = new Vue({
    el: '#app',
    data: {

    },
    methods: {
        helloA: function () {
            this.$http.get('http://localhost:8089/login/retrieve.do?id=99').then(function(res){
               alert(res.body[0].name);
            },function(){
                console.log('请求失败处理');
            });
        },
        helloB: function () {
            this.$http.post('http://localhost:8089/login/retrieve.do?id=99',{name:"菜鸟教程",url:"http://www.runoob.com",kk:"ffff"},{emulateJSON:true}).then(function(res){
                alert(res.body[0].name);
            },function(res){
                console.log(res.status);
            });

        },
        helloC: function () {
            axios
                .get('http://localhost:8089/login/retrieve.do?id=99')
                .then(response => (this.info = response))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        },
        helloD: function () {
            axios
                .post('http://localhost:8089/login/retrieve.do?id=99',{name:"菜鸟教程",url:"http://www.runoob.com",kk:"ffff"},{emulateJSON:true})
                .then(response => (this.info = response))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }
    }
}) </script>
</body>
</html>

五、java文件

package com.springboot.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;

import com.springboot.bean.Account;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;

@Controller
public class IndexController {


	@RequestMapping({"/init"})
	public String init(Model m, @RequestParam(required = true, defaultValue = "1") Integer id) {

		return "account";
	}


	@ResponseBody
	@RequestMapping({"/retrieve"})
	public List retrieve(Model m, @RequestParam(required = true, defaultValue = "1") Integer id, HttpServletRequest request) {
		List<Account> list = new ArrayList<Account>();
		String ll=request.getParameter("kk");
		String lld=request.getParameter("name");
		list.add(new Account("KangKang", "康康", "e10adc3949ba59abbe56e", "超级管理员", "17777777777"));
		list.add(new Account("Mike", "麦克", "e10adc3949ba59abbe56e", "管理员", "13444444444"));
		list.add(new Account("Jane", "简", "e10adc3949ba59abbe56e", "运维人员", "18666666666"));
		list.add(new Account("Maria", "玛利亚", "e10adc3949ba59abbe56e", "清算人员", "19999999999"));
		m.addAttribute("accountList", list);
		return list;
	}

}