Ajax的前后端数据传输问题

后端读取的ajax传入数据

前端读取的后端传输数据

 <%--
  Created by IntelliJ IDEA.
  User: tomel
  Date: 2022/6/1
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script>
        function testAjax(){
            $.ajax(
                {
                    type:"GET",
                    url:"testDataServlet.do?",
                    data:{"username":"张三","age":"10","gender":"男"},//这里用{”属性“：”值“}，{”属性“：”值“}的格式，这里不是json格式哦
                    dataType:"json",//以什么样的格式接收后端数据
                    success: function (list){
                        //i是索引，e是值
                        $.each(list,function (i,e){
                            console.log(e)
                        })
                    }
                }
            )
        }
    </script>
</head>
<body>
  <input type="button" value="触发事件" onclick="testAjax()">
</body>
</html>

 package com.msb;
 
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
 
import javax.servlet.GenericFilter;
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.IOException;
import java.nio.channels.NonWritableChannelException;
import java.sql.Array;
import java.sql.Date;
import java.util.ArrayList;
import java.util.Collections;
 
@WebServlet("/testDataServlet.do")
public class testDataServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
                                                            //import java.sql.Date;:"一月 1, 1970
        User user = new User("小胖",23,'男', Date.valueOf("2018-8-14"));
        User user2 = new User("大胖",23,'男', Date.valueOf("2020-8-14"));
        User user3 = new User("中胖",23,'男', Date.valueOf("2021-8-14"));
        ArrayList<Object> lists = new ArrayList<>();
        Collections.addAll(lists,user,user2,user3);
        //Gson gson = new Gson();
        GsonBuilder gsonBuilder = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss");
        Gson gson = gsonBuilder.create();
        String sql = gson.toJson(lists);
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        resp.getWriter().println(sql);
        /*resp.getWriter().println(sql);*/
        String username = req.getParameter("username");
        String age = req.getParameter("age");
        String gender = req.getParameter("gender");
        System.out.println("用户名："+username+"年龄："+age+"性别："+gender);
 
    }
}

posted @ 2022-06-01 10:29 爱豆技术部阅读(172) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Ajax的Jsonp跨域请求技术

· Servlet前后端交互

· 书城9 - 前后端 json 数据的交互

· Ajax 发送json格式数据以及发送文件(FormData)和自带的序列化组件: serializers

· ajax以及前后端数据传输

公告

昵称：爱豆技术部
园龄： 3年4个月
粉丝： 2
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

随笔档案 (213)

阅读排行榜

评论排行榜

1. IDEA激活密钥(永久)(1)

爱豆技术部

小幸运🤞

Ajax的前后端数据传输问题

Ajax的前后端数据传输问题

后端读取的ajax传入数据

前端读取的后端传输数据

公告

常用链接

最新随笔

我的标签

积分与排名

随笔档案 (213)

阅读排行榜

评论排行榜

最新评论

	<%--
	Created by IntelliJ IDEA.
	User: tomel
	Date: 2022/6/1
	Time: 9:52
	To change this template use File \| Settings \| File Templates.
	--%>
	<%@ page contentType="text/html;charset=UTF-8" language="java" %>
	<html>
	<head>

	<title>Title</title>
	<script src="jquery.min.js"></script>
	<script>
	function testAjax(){
	$.ajax(
	{
	type:"GET",
	url:"testDataServlet.do?",
	data:{"username":"张三","age":"10","gender":"男"},//这里用{”属性“：”值“}，{”属性“：”值“}的格式，这里不是json格式哦
	dataType:"json",//以什么样的格式接收后端数据
	success: function (list){
	//i是索引，e是值
	$.each(list,function (i,e){
	console.log(e)
	})
	}
	}
	)
	}
	</script>
	</head>
	<body>
	<input type="button" value="触发事件" onclick="testAjax()">
	</body>
	</html>

	package com.msb;

	import com.google.gson.Gson;
	import com.google.gson.GsonBuilder;

	import javax.servlet.GenericFilter;
	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.IOException;
	import java.nio.channels.NonWritableChannelException;
	import java.sql.Array;
	import java.sql.Date;
	import java.util.ArrayList;
	import java.util.Collections;

	@WebServlet("/testDataServlet.do")
	public class testDataServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	//import java.sql.Date;:"一月 1, 1970
	User user = new User("小胖",23,'男', Date.valueOf("2018-8-14"));
	User user2 = new User("大胖",23,'男', Date.valueOf("2020-8-14"));
	User user3 = new User("中胖",23,'男', Date.valueOf("2021-8-14"));
	ArrayList<Object> lists = new ArrayList<>();
	Collections.addAll(lists,user,user2,user3);
	//Gson gson = new Gson();
	GsonBuilder gsonBuilder = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss");
	Gson gson = gsonBuilder.create();
	String sql = gson.toJson(lists);
	resp.setCharacterEncoding("UTF-8");
	resp.setContentType("text/html;charset=UTF-8");
	resp.getWriter().println(sql);
	/resp.getWriter().println(sql);/
	String username = req.getParameter("username");
	String age = req.getParameter("age");
	String gender = req.getParameter("gender");
	System.out.println("用户名："+username+"年龄："+age+"性别："+gender);

	}
	}