利用axios和vue进行post表单提交

最新推荐文章于 2024-05-14 10:50:15 发布

Record growth...

最新推荐文章于 2024-05-14 10:50:15 发布

阅读量2k

点赞数

分类专栏： javaweb学习文章标签： vue.js servlet 前端

本文链接：https://blog.csdn.net/weixin_44239550/article/details/128381634

版权

javaweb学习专栏收录该内容

31 篇文章 1 订阅

订阅专栏

前端代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>表单填写vue部分</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container mt-5" id="app">
    <form action="" method="post">
        品牌名称:<input name="brandName" class="form-control" v-model="brand.brandName">
        企业名称:<input name="companyName" class="form-control"  v-model="brand.companyName">
        价格： <input name="ordered" class="form-control" v-model="brand.ordered">
        描述：<textarea name="description" rows="5" cols="20" class="form-control" v-model="brand.description"></textarea>
        状态：<input type="radio" name="status" value="1" class="mt-4" v-model="brand.status">启用
        <input type="radio" name="status" value="0" v-model="brand.status">禁用<br>

        <button class="btn btn-primary " type="button" @click="submit()">提交</button>
    </form>
</div>

</body>

</html>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                brand:{},
            }
        },
        methods:{
            submit(){
                that = this;
                //发送Ajax请求 完成添加功能
                axios({
                    method:"post",
                    url:"http://localhost:8080/AddServlet_vue",
                    data:that.brand
                }).then(function (response) {
                        alert(response.data);
                        //判断想响应是否成功
                        if (response.data == "success"){
                            location.href = "http://localhost:8080/brand_vue.html"
                        }else {
                            alert("erro")
                        }
                    }, function (err) {
                        console.log(err);
                    })
            }
        },

    })

</script>

后端servlet代码：

package com.fldwws.web;

import com.alibaba.fastjson.JSON;
import com.fldwws.pojo.Brand;
import com.fldwws.service.BrandService;
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.BufferedReader;
import java.io.IOException;
import java.util.List;

@WebServlet("/AddServlet_vue")
public class AddServlet_vue extends HttpServlet {

    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1. 接收品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串

        //转为Brand对象
        Brand brand = JSON.parseObject(params, Brand.class);

        //2. 调用service添加
        brandService.add(brand);

        //3. 响应成功的标识
        response.getWriter().write("success");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

有几点和之前写jsp不同的地方，确实极大简化。

前端的不同

首先是不需要填写action=""，因为使用了click事件进行post表单提交

2.在data中定义的是空的一个集合，第一次写，感觉非常新奇，居然不用任何的值，只需要后期使用v-model="brand.***"进行赋值。

axios的内容，这里填写的内容十分简洁明了，方式是什么，地址是什么，需要提交的值是什么

 axios({
                    method:"post",
                    url:"http://localhost:8080/AddServlet_vue",
                    data:that.brand
                }).then(function (response) {
                        alert(response.data);
                        //判断想响应是否成功
                        if (response.data == "success"){
                            location.href = "http://localhost:8080/brand_vue.html"
                        }else {
                            alert("erro")
                        }
                    }, function (err) {
                        console.log(err);
                    })

响应的内容。这里对响应进行了一个判断，因为我们手动设置了提交后的响应。之后会说到。

servlet的改变

核心的代码：

//1. 接收品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串

        //转为Brand对象
        Brand brand = JSON.parseObject(params, Brand.class);

        //2. 调用service添加
        brandService.add(brand);

        //3. 响应成功的标识
        response.getWriter().write("success");

接收数据，转换对象，调用方法，这里不再需要从域对象中一个一个取值再赋值，取到json字符串之后，只需要一句代码，就可以得到我们想要的Java对象。甚至，我们还可以设置响应内容，响应成功或是失败。

Record growth...

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
利用axios和vue进行post表单提交

接收数据，转换对象，调用方法，这里不再需要从域对象中一个一个取值再赋值，取到json字符串之后，只需要一句代码，就可以得到我们想要的Java对象。甚至，我们还可以设置响应内容，响应成功或是失败。
复制链接

扫一扫

专栏目录