json前后端传输（ajax异步提交）

最新推荐文章于 2025-05-08 15:16:50 发布

饭饭的小肚子

最新推荐文章于 2025-05-08 15:16:50 发布

阅读量304

点赞数

分类专栏： json前后端数据传输文章标签： ajax json 异步

本文链接：https://blog.youkuaiyun.com/qq_32523369/article/details/73965074

版权

json前后端数据传输专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的示例，展示了如何利用Ajax进行异步数据提交，并使用Fastjson解析JSON数据。通过一个HTML页面上的按钮触发，将一组JSON格式的数据发送到后端Servlet，而后端再解析这些数据并返回一个简单的JSON响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
	src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
	var jsonStr = [ {		
		'name' : 'jim',
		'age' : 20
	}, {
		'name' : 'king',
		'age' : 26
	}, {
		'name' : 'jge',
		'age' : 30
	} ];
	/* 生成一个json格式的对象 */
	function getData() {
	/* 这里用到jquery和ajax 异步提交。。具体结构网上资料很多*/
		$.ajax({
			type : 'post',
			url : 'Getdata',
			dataType : 'json',
			data : {
				'mydata' : JSON.stringify(jsonStr)
			},
			/* 把jsonStr对象字符串化，数据传输后端的都是字符串，后面再解析  */
			/* 把数据放到 mydata这个键中 */
			async : true,
			success : function(data) {
				$("#record").append(data.name);
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				alert(XMLHttpRequest.status);
				alert(XMLHttpRequest.readyState);
				alert(textStatus);
			}
		});
	};
</script>
</head>
<body>
	<button id="one" οnclick="getData()">one</button>
	<br>
	<span id="record">xiao</span>
</body>
</html>

servlet:

package xiao.servlet;

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

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

public class GetDataServlet extends HttpServlet {
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		System.out.println("helloworld!");
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		PrintWriter out = resp.getWriter();

		String jsonStr = req.getParameter("mydata");
		JSONArray jsonArray = JSON.parseArray(jsonStr);
		//JSONArray 用的是fastjson包中的类，能快速解析字符串并生成json对象
		String name = "";
		String age = "";
		//解析mydata中的Json对象
		for (int i = 0; i < jsonArray.size(); i++) {
			JSONObject jsonJ = jsonArray.getJSONObject(i);
			name = jsonJ.getString("name");
			age = jsonJ.getString("age");
			System.out.println("name=" + name);
			System.out.println("age=" + age);
		}
		
		//测试往前台传数据
		String jsonText = GetFirstFloorValue();
		System.out.println(jsonText);
		JSONObject json = JSON.parseObject(jsonText);
		System.out.println(json.toJSONString());
		out.write(json.toJSONString());
		out.flush();
		out.close();
	}

	
	/**
	 * 
	 	这里主要测试将字符串回显回前端
	 * @return
	 */
	private String GetFirstFloorValue() {
		StringBuffer sb = new StringBuffer();
		sb.append("{").append("\"name\":").append("\"xiao\"").append("}");
		return sb.toString();
	}
}

fastjson jar包:http://download.youkuaiyun.com/detail/pdsyzbaozi/8199419