ajax前端向后端传值问题

文章目录

  • ajax前端向后端传值问题
    • 一、前端传值到后端详细步骤
    • 二、后端接收值的详细步骤

ajax前端向后端传值问题

ajax传值就是将你所要传递的值转换成json格式的字符串,从而传到后台。

一、前端传值到后端详细步骤

1、给按钮加上点击事件
2、定义一个集合list,和一个对象data
3、取到input标签里的值
4、将取到的值赋到data里面
5、将data赋到list里面(因为json格式需要)
6、写好ajax的通用格式
7、将list转成json格式的数组后台才可以接收

<body>
<input id="username" value="admin">
<input id="password" value="123456">
<button id="add">添加</button>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">

	$(function() {
		$("#add").click(function() {
			var list = [];
			var data = {};
			data.username=$("#username").val();
			data.password=$("#password").val();
			list.push(data);
			$.ajax(
		            {
		                url:"add",
		                type:"post",
		                data : {
							"data" : JSON.stringify(list)
						},
						success: function(d){
							alert("保存成功");
						},
						error : function (d){
							alert("保存失败");
						}
		            })
		})
	})

</script>
</body>

二、后端接收值的详细步骤

1、用getParameter接受data;
2、使用JSONObject.parseObject()将userList转成集合
3、遍历集合,调用你需要的接口

@WebServlet("/add")
public class AddServlet extends HttpServlet{
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String userList = req.getParameter("data");
		User[] users = JSONObject.parseObject(userList,User[].class);
		for (User user : users) {
			System.out.println("用户"+user);
		}
	}
}

第一次写博客哦,欢迎大家批评,指出博客问题。

你可能感兴趣的:(ajax,java,ajax传值,json)