JSON
JSONの概要
-
AJAXは最初にXMLのデータ形式を使用しました。XMLのデータ形式は非常にシンプルで明確で、簡単に記述できます。ただし、XMLにはタグが多すぎて構造が非常に複雑であるため、解析が比較的複雑であるため、現在はAJAXでデータを送信するためにXMLを使用することはほとんどありません。新しいテクノロジーのJSONに置き換えられました。
-
JSONはJavaScriptObject Notationの略であり、JSが提供するデータ交換フォーマットです。
-
JS ONオブジェクトは本質的にJSオブジェクトですが、このオブジェクトは特別です。文字列に直接変換したり、さまざまな言語で渡したり、ツールを使用して他の言語のオブジェクトに変換したりできます。
-
日常業務で最も一般的に使用されるのは、非同期リクエスト+ jsonです。
-
たとえば、次のようなJSONオブジェクトがあります。
-
{「名前」：「孫悟空」、「年齢」：18、「住所」：「北京」}
-
このオブジェクトには、名前、年齢、住所の3つの属性があります
-
オブジェクトが一重引用符で囲まれている場合、それは文字列になります
-
'{“ name”：” sunwukong”、” age”：18、” address”：” beijing”}'
-
文字列になることの利点の1つは、異なる言語間で文字列を渡すことができることです。
-
たとえば、JSONを文字列としてサーブレットに送信する場合、JSON文字列をJavaのJavaオブジェクトに変換できます。
-
JSONは6つのデータ型で表されます
- ストリング
-
例：「文字列」
-
注：一重引用符は使用できません
- デジタル：
- 例：123.4
- ブール値：
- 例：true、false
- null値：
- 例：null
- オブジェクト
- 例子：{“name”:”sunwukong”, ”age”:18}
- アレイ
- 例：[1、 "str"、true]
JSでJSONを操作する
- JSONオブジェクトを作成する
-
var json = {“ name1”：” value1”、” name2”：” value2”、“ name3”：[1、” str”、true]};
-
var json = [{“ name1”：” value1”}、{“ name2”：” value2”}];
- JSONオブジェクトをJSON文字列に変換する
- JSON.stringify（JSON象）
- JSON文字列をJSONオブジェクトに変換します
- JSON.parse（JSON文字列）
JavaでJSONを操作する
-
Javaでは、ファイルからJSON文字列を読み取ることも、クライアントから送信されるJSON文字列にすることもできるため、最初の質問は、JSON文字列をJavaオブジェクトに変換する方法です。
-
まず、JSON文字列を解析するには、サードパーティのツールをインポートする必要があります。現在、JSONを解析するための主流のツールはjson-lib、jackson、gsonの3つです。json-libの使用と比較すると、3つの解析ツールはより複雑で効率が低くなります。ジャクソンとgsonはより高い分析効率を持っています。使い方は簡単です。ここでは、gsonを例として説明します。
-
Gsonは、Googleが作成したJSON解析ツールであり、使いやすく、優れた解析パフォーマンスを備えています。
-
GsonでのJSONの解析の中核はGsonクラスであり、解析操作はこのクラスのインスタンスを介して実行されます。
-
JSON文字列をオブジェクトに変換する
@Test
public void JsonToJava(){
Gson gson = new Gson();
String jsonStr = "{\"id\":1001,\"name\":\"张三\",\"age\":22,\"dept_id\":1}";
/*存在map中，键值对*/
Map map = gson.fromJson(jsonStr, Map.class);
System.out.println(map);
/*存到Employee对象中*/
Employee employee = gson.fromJson(jsonStr, Employee.class);
System.out.println(employee);
}
- オブジェクトをJSON文字列に変換する
@Test
public void JavaToJson(){
/*转换单个对象*/
Employee employee = new Employee();
employee.setId(1001);
employee.setName("张三");
employee.setAge(22);
employee.setDept_id(1);
Department department = new Department();
department.setId(1);
department.setDep_name("研发部");
department.setDep_location("上海");
employee.setDepartment(department);
Gson gson = new Gson();
String jsonStr = gson.toJson(employee);
System.out.println(jsonStr);
System.out.println("====================================================");
/*转换对象数组*/
EmployeeDaoImpl employeeDao = new EmployeeDaoImpl();
List<Employee> emps = employeeDao.getEmployee();
String strs = gson.toJson(emps);
System.out.println(strs);
}
JQuery非同期リクエストはJSONデータを返します
Javaコードブロック：
@WebServlet(name = "GetEmpsJsonStrServlet",urlPatterns = "/getJsonServlet")
public class GetEmpsJsonStrServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Gson gson = new Gson();
EmployeeDaoImpl employeeDao = new EmployeeDaoImpl();
List<Employee> emps = employeeDao.getEmployee();
/*转换成json*/
String jsonStr = gson.toJson(emps);
response.setContentType("text/html;charset=utf-8");
/*写出到页面*/
response.getWriter().println(jsonStr);
}
}
htmlページ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一键显示信息</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script>
$(function (){
$("#showTable").click(function (){
$.ajax({
url:"getJsonServlet",
type:"post",
dataType:"json",
success:function (data){
var str = "<tr><th>编号</th><th>姓名</th><th>年龄</th>" +
"<th>部门编号</th><th>部门名称</th><th>部门地址</th></tr>";
for(var i = 0; i < data.length; ++i){
var emp = data[i];
str += "<tr align='center'><td>"+emp.id+
"</td><td>"+emp.name+"</td><td>"+emp.age+"</td><td>"+emp.dept_id+
"</td><td>"+emp.department.dep_name+"</td><td>"+emp.department.dep_location +
"</td></tr>";
}
$("#empsTable").html(str);
}
})
})
})
</script>
</head>
<body>
<h1 align="center">员工信息表</h1>
<h1 align="center"><input id="showTable" type="button" value="点击获取员工信息" align="center"></h1>
<table id="empsTable" align="center" width="70%" border="1px" cellspacing="0px">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>部门编号</th>
<th>部门名称</th>
<th>部门地址</th>
</tr>
</table>
</body>
</html>
ボタンをクリックした後：
