使用JSON与JQuery进行数据交换-优快云博客

本文链接：https://blog.youkuaiyun.com/luke199257/article/details/81193400

如何发送和获取Json

需求:

js : jquery-3.3.1.js -- JQuery

jar : fastjson-1.2.47.jar -- Object > Json jar包

流程图:

流程

浏览器

1.提交之前

2.提交之后

3.控制台

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
  <servlet>
    <servlet-name>JsonTest</servlet-name>
    <servlet-class>cn.servlet.JsonTest</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>JsonTest</servlet-name>
    <url-pattern>/servlet/JsonTest</url-pattern>
  </servlet-mapping>

</web-app>

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function() {
		$("#bt").click(function() { /*获取表单值*/
			var uname = $("#uname").val();
			var password = $("#password").val();
			/*生成json对象*/
			$.getJSON("servlet/JsonTest", {
				"uname" : uname,
				"password" : password
			}, function(us) {
				$("#get1").html(us.uname);
				$("#get2").html(us.password);
				console.log(us.uname);
				console.log(us.password);
			})
		});
	})
</script>
</head>
<body>
	账号:
	<input id="uname" type="text" class="form-control" />
	<br /> 密码:
	<input id="password" type="password" class="form-control" />
	<br />
	<button id="bt" class="btn">提交</button>
	<br /> 账号:
	<span id="get1" class="form-control">... </span>
	<br /> 密码:
	<span id="get2" class="form-control">... </span>
	<br />
</body>
</html>

cn.servlet.java

package cn.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 cn.po.Users;

public class JsonTest extends HttpServlet {

	public JsonTest() {
		super();
	}

	public void destroy() {
		super.destroy();
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("进入doGet");
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		System.out.println("进入doPost");
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		request.setCharacterEncoding("utf-8");
		String uname = request.getParameter("uname");
		String password = request.getParameter("password");
		PrintWriter out = response.getWriter();
		Users us = new Users(uname, password);
		String jUs = JSON.toJSONString(us);
		System.out.println(jUs);
		out.println(jUs);
		out.flush();
		out.close();
	}

	public void init() throws ServletException {
	}

}