前端使用axios，vue，后端使用servlet，进行传值与接收

1.这里axios使用的是params方式

                    axios({
                        method: 'Get',
                        url: 'BselServlet',
                        params: {
                            bnumber:this.bnumber,
                        },
                    }).then(res=>{
                        console.log(res.data);
                        this.receive_name=res.data.bname//获取商品名
                        this.receive_img=res.data.bimg//获取img路径
                    },err=>{
                        console.log(err);
                    })

后端接收，getParameter即可：

// 1 获取页面参数信息
String bnumber = request.getParameter("bnumber");

完整代码：
html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
	<div id="sel">
		请输入你要查询的商品编号:<input type="text" id="bnumber" v-model="bnumber"
			style="display: inline-block">
		<button id="b1" v-on:click="select">查询</button>
		<div v-if="receive_name"> 名称为：{{receive_name}} <br> <img v-bind:src="receive_img"></div>
	</div>
	<script src="file/vue.js"></script>
	<script src="file/axios.js"></script>
	<script>
        let insVue=new Vue({
            el:"#sel",
            data:{
                bnumber:"",
                receive_name:"",
                receive_img:""
            },
            methods: {
                select(){
                    console.log("点击查询")
                    axios({
                        method: 'Get',
                        url: 'BselServlet',
                        params: {
                            bnumber:this.bnumber,
                        },
                    }).then(res=>{
                        console.log(res.data);
                        this.receive_name=res.data.bname//获取商品名
                        this.receive_img=res.data.bimg//获取img路径
                    },err=>{
                        console.log(err);
                    })
                }
            }
        })
    </script>
</body>
</html>

BselServlet:

package com.cqust.servlet;

import java.io.IOException;
import java.io.PrintWriter;

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 com.alibaba.fastjson.JSON;
import com.cqust.biz.BrandBiz;
import com.cqust.entity.BrandEntity;

@WebServlet("/BselServlet")
public class BselServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		
		// 1 获取页面参数信息
		String bnumber = request.getParameter("bnumber");
		// 2 调用业务处理逻辑
		BrandBiz bBiz = new BrandBiz();
		BrandEntity brand = bBiz.selectBrand(bnumber);
		// 3 返回处理结果 给 页面
		String path = "";
		if (brand != null) {
			System.out.println("存在");
			String json = JSON.toJSONString(brand);
			System.out.println(json);
			out.write(json);
		}
		else {
			System.out.println("不存在");
		}
		out.flush();
		out.close();
	}

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

}

BrandEntity:

package com.cqust.entity;

import java.util.Date;

public class BrandEntity {//品牌
	String bname;
	String bnumber;
	String bowner;
	String btype;
	Date btime;
	String bimg;
	String bshow;
	String bcompany;
	public String getBname() {
		return bname;
	}
	public void setBname(String bname) {
		this.bname = bname;
	}
	public String getBnumber() {
		return bnumber;
	}
	public void setBnumber(String bnumber) {
		this.bnumber = bnumber;
	}
	public String getBowner() {
		return bowner;
	}
	public void setBowner(String bowner) {
		this.bowner = bowner;
	}
	public String getBtype() {
		return btype;
	}
	public void setBtype(String btype) {
		this.btype = btype;
	}
	public Date getBtime() {
		return btime;
	}
	public void setBtime(Date btime) {
		this.btime = btime;
	}
	public String getBimg() {
		return bimg;
	}
	public void setBimg(String bimg) {
		this.bimg = bimg;
	}
	public String getBshow() {
		return bshow;
	}
	public void setBshow(String bshow) {
		this.bshow = bshow;
	}
	public String getBcompany() {
		return bcompany;
	}
	public void setBcompany(String bcompany) {
		this.bcompany = bcompany;
	}
	public BrandEntity(String bname, String bnumber, String bowner, String btype, Date btime, String bimg, String bshow,
			String bcompany) {
		super();
		this.bname = bname;
		this.bnumber = bnumber;
		this.bowner = bowner;
		this.btype = btype;
		this.btime = btime;
		this.bimg = bimg;
		this.bshow = bshow;
		this.bcompany = bcompany;
	}
	public BrandEntity() {
		super();
		// TODO Auto-generated constructor stub
	}
	@Override
	public String toString() {
		return "BrandEntity [bname=" + bname + ", bnumber=" + bnumber + ", bowner=" + bowner + ", btype=" + btype
				+ ", btime=" + btime + ", bimg=" + bimg + ", bshow=" + bshow + ", bcompany=" + bcompany + "]";
	}
	
}

BrandDao:

package com.cqust.dao;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.cqust.entity.BrandEntity;
import com.cqust.util.C3p0Utils;

public class BrandDao {
	// 查询单个品牌--通过bnumber查找
	public BrandEntity selectBrand(String bnumber) throws SQLException {
		QueryRunner runner = new QueryRunner(C3p0Utils.getDataSource());
		String sql = "select * from blist where bnumber=?";
		BrandEntity brand = (BrandEntity) runner.query(sql, new BeanHandler(BrandEntity.class),
				new Object[] { bnumber });
		return brand;
	}

	// 查询所有，返回List集合
	public List selectAllBrands() throws SQLException {
		QueryRunner runner = new QueryRunner(C3p0Utils.getDataSource());
		String sql = "select * from blist";
		List List = (List) runner.query(sql, new BeanListHandler(BrandEntity.class));
		return List;
	}

	// 插入
	public Boolean insertBrand(BrandEntity brand) throws SQLException {
		QueryRunner runner = new QueryRunner(C3p0Utils.getDataSource());
		String sql = "insert into blist (bname,bnumber,bowner,btype,bimg,btime,bshow,bcompany) values (?,?,?,?,?,?,?,?)";
		int num = runner.update(sql, new Object[] { brand.getBname(),brand.getBnumber(),brand.getBowner(),brand.getBtype(),brand.getBimg(),
				brand.getBtime(),brand.getBshow(),brand.getBcompany() });
		if (num > 0)
			return true;
		return false;
	}

	// 删除
	public Boolean deleteBrand(String bnumber) throws SQLException {
		QueryRunner runner = new QueryRunner(C3p0Utils.getDataSource());
		String sql = "delete from blist where bnumber=?";
		int num = runner.update(sql, bnumber);
		if (num > 0)
			return true;
		return false;
	}

	// 修改
	public Boolean updateBrand(BrandEntity brand) throws SQLException {
		QueryRunner runner = new QueryRunner(C3p0Utils.getDataSource());
		String sql = "update  blist set bname=?,bowner=?,btype=?,bimg=?,btime=?,bshow=?,bcompany=? where bnumber=?";
		int num = runner.update(sql, new Object[] { brand.getBname(),brand.getBowner(),brand.getBtype(),brand.getBimg(),
				brand.getBtime(),brand.getBshow(),brand.getBcompany(),brand.getBnumber() });
		if (num > 0)
			return true;
		return false;
	}
}

BrandBiz:

package com.cqust.biz;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.cqust.dao.BrandDao;
import com.cqust.entity.BrandEntity;

public class BrandBiz {
	private static BrandDao dao = new BrandDao();
	
	//查询单个
	public BrandEntity selectBrand(String bnumber) {
		BrandEntity brand=new BrandEntity();
		try {
			brand=dao.selectBrand(bnumber);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return brand;
	}
	//查询所有
	public List selectAllBrands() {
		List<BrandEntity> list = new ArrayList<BrandEntity>();
		try {
			list=dao.selectAllBrands();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return list;
	}
	//插入
	public Boolean insertBrand(BrandEntity brand) {
		Boolean res=null;
		try {
			res=dao.insertBrand(brand);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return res;
	}
	//删除
	public Boolean deleteBrand(String bnumber) {
		Boolean res=null;
		try {
			res=dao.deleteBrand(bnumber);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return res;
	}
	//修改
	public Boolean updateBrand(BrandEntity brand) {
		Boolean res=null;
		try {
			res=dao.updateBrand(brand);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return res;
	}
}

2.axios使用的是data方式

前端：

                    axios({
                        method: 'Post',
                        url: 'BselServlet',
                        data: {
                            bnumber:this.bnumber,
                        },
                    }).then(res=>{
                        console.log(res.data);
                        this.receive_name=res.data.bname//获取商品名
                        this.receive_img=res.data.bimg//获取img路径
                    },err=>{
                        console.log(err);
                    })

后端：
使用数据流获取信息，再转化为字符串类型toString()，之后转化为json类型JSONObject.parseObject(str)，通过jsonObject.getString();获取参数：

        //数据流获取信息
        StringBuilder sb = new StringBuilder();
        BufferedReader reader = request.getReader();
        char[] buf = new char[1024];
        int len;
        while ((len = reader.read(buf)) != -1){
            sb.append(buf,0,len);
        }
        //转json
        String str = sb.toString();
        System.out.println(str);
        JSONObject jsonObject = JSONObject.parseObject(str);
        String bnumber = jsonObject.getString("bnumber");
		System.out.println(bnumber);

完整html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
	<div id="sel">
		请输入你要查询的商品编号:<input type="text" id="bnumber" v-model="bnumber"
			style="display: inline-block">
		<button id="b1" v-on:click="select">查询</button>
		<div v-if="receive_name"> 名称为：{{receive_name}} <br> <img v-bind:src="receive_img"></div>
	</div>
	<script src="file/vue.js"></script>
	<script src="file/axios.js"></script>
	<script>
        let insVue=new Vue({
            el:"#sel",
            data:{
                bnumber:"",
                receive_name:"",
                receive_img:""
            },
            methods: {
                select(){
                    console.log("点击查询")
                    axios({
                        method: 'Post',
                        url: 'BselServlet',
                        data: {
                            bnumber:this.bnumber,
                        },
                    }).then(res=>{
                        console.log(res.data);
                        this.receive_name=res.data.bname//获取商品名
                        this.receive_img=res.data.bimg//获取img路径
                    },err=>{
                        console.log(err);
                    })
                }
            }
        })
    </script>
</body>
</html>

BselServlet：

package com.cqust.servlet;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;

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 com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.cqust.biz.BrandBiz;
import com.cqust.entity.BrandEntity;

@WebServlet("/BselServlet")
public class BselServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		
		// 1 获取页面参数信息
		//数据流获取信息
        StringBuilder sb = new StringBuilder();
        BufferedReader reader = request.getReader();
        char[] buf = new char[1024];
        int len;
        while ((len = reader.read(buf)) != -1){
            sb.append(buf,0,len);
        }
        //转json
        String str = sb.toString();
        System.out.println(str);
        JSONObject jsonObject = JSONObject.parseObject(str);
        String bnumber = jsonObject.getString("bnumber");
		System.out.println(bnumber);
		// 2 调用业务处理逻辑
		BrandBiz bBiz = new BrandBiz();
		BrandEntity brand = bBiz.selectBrand(bnumber);
		// 3 返回处理结果 给 页面
		String path = "";
		if (brand != null) {
			System.out.println("存在");
			String json = JSON.toJSONString(brand);
			System.out.println(json);
			out.write(json);
		}
		else {
			System.out.println("不存在");
		}
		out.flush();
		out.close();
	}

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

}

页面效果图：
1.
在这里插入图片描述

2.在这里插入图片描述
3.在这里插入图片描述
4.在这里插入图片描述
5.
在这里插入图片描述

202207302338六

# 前端 # servlet
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟