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

前端代码:

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>

<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不同的地方,确实极大简化。

前端的不同

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

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

  1. 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);
                    })

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

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对象。甚至,我们还可以设置响应内容,响应成功或是失败。

你可能感兴趣的:(javaweb学习,vue.js,servlet,前端)