（完全干货，必看）用九九乘法表转成Json数据转成xml再用ajax展示到html

要求：把九九乘法表用json转换成xml，然后在用ajax展示在HTML，展示在HTML的九九乘法表的格式如下：

要把九九乘法表按照下面的样式用ajax来输出到HTML，而且，不要有1*1~1*9，只要2~9的数字的乘法。并且2、3、4、5这四个数字必须在上面，6、7、8、9这四个数字要在下面。而2、3、5、7这四个素数必须为红色。

第一步：思路是先把九九乘法表给输出到控制台吧。

public static void main(String[] args) {
		for (int i = 2; i <= 9; i++) {
			for (int j = 1; j <= i; j++) {
				System.out.print(i + "×" + j + "=" + (i * j));
			}
			System.out.println();
		}
	}

第二步：完成了九九乘法表的输出，接下来要做的就是把这个输出的数据转换成json数据

@Controller
@RequestMapping("/")
public class HomeController {
    @RequestMapping(value = "/jsssss")
	@ResponseBody
	public String jiujiu() {
		JSONArray jSONArray = new JSONArray();
		for (int i = 2; i <= 9; i++) {
			for (int j = 1; j <= 9; j++) {
				JSONObject jSONObject = new JSONObject();
				if ((i * j) == 2 || (i * j) == 3 || (i * j) == 5 || (i * j) == 7) {
					jSONObject.put("name", i + "&#215;" + j + "=" + "<span style='color:red'>" + (i * j) + "</span>");
				} else {
					jSONObject.put("name", i + "&#215;" + j + "=" + (i * j));
				}
				jSONArray.put(jSONObject);
			}
			System.out.println("");
		}
		String toString = jSONArray.toString();
		return toString;
	}
}

为了确定九九乘法是否已经被我们转换成json数据，可以运行这个项目，然后输入@RequestMapping(value = "/jsssss")的jsssss来测试。

第三步：完成了json数据的转换，接下来写HTML。

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
	<head>
		<title>九九乘法表</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	</head>
	<body id="abc">

		<script>
			window.onload = function () {
				$.post("jsssss", {}, function (data) {
					var object = JSON.parse(data);
					var table = document.createElement("table");
					table.setAttribute('border', '1');
					$("#abc").append(table);
					for (var i = 0; i <= 17; i++) {
						
						if (i <= 8) {
							var trOne = document.createElement("tr");
							var tdOne = document.createElement("td");
							var tdTwo = document.createElement("td");
							var tdThr = document.createElement("td");
							var tdFou = document.createElement("td");
							$(tdOne).html(object[i]["name"]);
							$(tdTwo).html(object[i + 9]["name"]);
							$(tdThr).html(object[i + 18]["name"]);
							$(tdFou).html(object[i + 27]["name"]);
							$(trOne).append(tdOne).append(tdTwo).append(tdThr).append(tdFou);
							$(table).append(trOne);
						} else if (i > 8) {
							var trTwo = document.createElement("tr");
							var tdFiv = document.createElement("td");
							var tdSix = document.createElement("td");
							var tdSev = document.createElement("td");
							var tdEig = document.createElement("td");
							$(tdFiv).html(object[i + 27]["name"]);
							$(tdSix).html(object[i + 36]["name"]);
							$(tdSev).html(object[i + 45]["name"]);
							$(tdEig).html(object[i + 54]["name"]);
							$(trTwo).append(tdFiv).append(tdSix).append(tdSev).append(tdEig);
							$(table).append(trTwo);
						}
					}
					
				});
			};
		</script>

	</body>
</html>

已经完成了HTML的连接前端，但是有人不理解那个i + 9、i + 18。。。是什么意思，下面这个是我们总结出来的一个对九局乘法表排序：

0到8行，就是2的乘法，以此类推，没一个乘法都8个字符。

  0~8   [{"2":"2×1=2"},{"2":"2×2=4"},{"2":"2×3=6"},{"2":"2×4=8"},{"2":"2×5=10"},{"2":"2×6=12"},{"2":"2×7=14"},{"2":"2×8=16"},{"2":"2×9=18"},
  9~17  {"3":"3×1=3"},{"3":"3×2=6"},{"3":"3×3=9"},{"3":"3×4=12"},{"3":"3×5=15"},{"3":"3×6=18"},{"3":"3×7=21"},{"3":"3×8=24"},{"3":"3×9=27"},
  18~26     {"4":"4×1=4"},{"4":"4×2=8"},{"4":"4×3=12"},{"4":"4×4=16"},{"4":"4×5=20"},{"4":"4×6=24"},{"4":"4×7=28"},{"4":"4×8=32"},{"4":"4×9=36"},
   27~35 {"5":"5×1=5"},{"5":"5×2=10"},{"5":"5×3=15"},{"5":"5×4=20"},{"5":"5×5=25"},{"5":"5×6=30"},{"5":"5×7=35"},{"5":"5×8=40"},{"5":"5×9=45"}

 36~ 44,{"6":"6×1=6"},{"6":"6×2=12"},{"6":"6×3=18"},{"6":"6×4=24"},{"6":"6×5=30"},{"6":"6×6=36"},{"6":"6×7=42"},{"6":"6×8=48"},{"6":"6×9=54"},
 45~ 53{"7":"7×1=7"},{"7":"7×2=14"},{"7":"7×3=21"},{"7":"7×4=28"},{"7":"7×5=35"},{"7":"7×6=42"},{"7":"7×7=49"},{"7":"7×8=56"},{"7":"7×9=63"}
  54~ 62, {"8":"8×1=8"},{"8":"8×2=16"},{"8":"8×3=24"},{"8":"8×4=32"},{"8":"8×5=40"},{"8":"8×6=48"},{"8":"8×7=56"},{"8":"8×8=64"},{"8":"8×9=72"},
 63~72 {"9":"9×1=9"},{"9":"9×2=18"},{"9":"9×3=27"},{"9":"9×4=36"},{"9":"9×5=45"},{"9":"9×6=54"},{"9":"9×7=63"},{"9":"9×8=72"},{"9":"9×9=81"}]

这就是我们最后的结果：

JSON跟XML的差异

XML：是一种标记语言，XML可以用来传输互数据和存储数据

JSON：是一种轻量级的数据交换格式，是为数据而生