11-Json_Ajax

最新推荐文章于 2024-09-15 00:20:13 发布

cherish9927

最新推荐文章于 2024-09-15 00:20:13 发布

阅读量89

点赞数

分类专栏： Java Web 文章标签： ajax json

本文链接：https://blog.csdn.net/qq_43069447/article/details/107725495

版权

Java Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.Json

1.定义

JSON是一种轻量级的数据交换格式，不仅易于阅读和编写，而且易于机器解析和生成。

轻量级：跟xml相比较
数据交换：客户端和服务器之间业务数据的传递格式

2.JSON在JavaScript中的使用

定义

Json是由键值对组成，并且由大括号包围。每个键由引号引起来，键和值之间使用冒号进行分隔，多个键值对之间用逗号进行分隔。

			// json的定义
			var jsonObj = {
				"key1":1,
				"key2":"abc",
				"key3":true,
				"key4":[1,"abc",true],
				"key5":{
					"key5_1":1,
					"key5_2":"abc",
				},
}

访问

json本身是一个对象，其中的key就是对象中的一个属性。

			// json的访问
			alert(jsonObj.key1);
			alert(jsonObj.key2);
			alert(jsonObj.key3);
			alert(jsonObj.key4);
			alert(jsonObj.key5.key5_1);
			alert(jsonObj.key5.key5_2);

常用方法

json的存在形式：

对象形式————json对象————操作json中的数据时使用
字符串形式————json字符串————客户端和服务器进行数据交换时使用

JSON.stringify()————把json对象转换成json字符串
JSON.parse()————把json字符串转换成json对象

			// json对象转字符串
			var jsonObjString = JSON.stringify(jsonObj);
			alert(jsonObjString);

			// json字符串转json对象
			var jsonObj2 = JSON.parse(jsonObjString);
			alert(jsonObj2);
			alert(jsonObj2.key1);

3.JSON在java中的使用

JavaBean和json的相互转换

//javaBean和json的转换
    @Test
    public void test1(){
        Person person = new Person(1, "张三");
        //创建Gson对象
        Gson gson = new Gson();
        //toJson方法可以把java对象转换成为json字符串
        String personJsonString = gson.toJson(person);
        System.out.println(personJsonString);
        //fromJson把json字符串转换回Java对象
        //第一个参数是json字符串
        //第二个参数是转换回去的Java对象类型
        Person person1 = gson.fromJson(personJsonString, Person.class);
        System.out.println(person1);
    }

List和json的相互转换

//list和json的转换
    @Test
    public void test2(){
        List<Person> personList = new ArrayList<>();
        personList.add(new Person(2, "李四"));
        personList.add(new Person(3, "王五"));
        Gson gson = new Gson();
        //把List转换为json字符串
        String personListString = gson.toJson(personList);
        System.out.println(personListString);
        List<Person> list = gson.fromJson(personListString,new PersonListType().getType());
        System.out.println(list);
        Person person = list.get(0);
        System.out.println(person);
    }

map和json的相互转换

//map和json的转换
    @Test
    public void test3(){
        Map<Integer,Person> personMap = new HashMap<>();
        personMap.put(1, new Person(1,"张三"));
        personMap.put(2, new Person(2,"李四"));
        Gson gson = new Gson();
        String personMapString = gson.toJson(personMap);
        System.out.println(personMapString);
        Map<Integer,Person> personMap1 = gson.fromJson(personMapString, new TypeToken<HashMap<Integer,Person>>(){}.getType());
        System.out.println(personMap1);
        Person person = personMap1.get(1);
        System.out.println(person);
    }

2.Ajax请求

1.定义

Ajax是一种创建交互式网页应用的网页开发技术，一种浏览器通过js异步发起请求，局部更新页面的技术。

局部更新，浏览器地址栏不会发生变化；
局部更新，不会舍弃原来页面的内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function ajaxRequest() {
				//创建XMLHttpRequest
				var xmlHttpRequest = new XMLHttpRequest();
				//调用open方法设置请求参数
				xmlHttpRequest.open("GET","http://localhost:8080/12_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
				//在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
				xmlHttpRequest.onreadystatechange = function () {
					if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
						var jsonObj = JSON.parse(xmlHttpRequest.responseText);
						document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + " 姓名:" + jsonObj.name;
					}
				}
				//调用send方法发送请求
				xmlHttpRequest.send();
			}
		</script>
	</head>
	<body>	
		<button onclick="ajaxRequest()">ajax request</button>
		<div id="div01">
		</div>
	</body>
</html>

2.jQuery中的Ajax请求

$.ajax方法

属性	说明
url	表示请求的地址
type	表示请求的类型（GET或POST）
data	表示发送给服务器的数据，格式1:name=value&name=value；格式2:{key:value}
success	请求成功响应的回调函数
dataType	响应的数据类型，text-纯文本、xml-xml数据、json-json对象

// ajax请求
				$("#ajaxBtn").click(function(){
					$.ajax({
						url:"http://localhost:8080/12_json_ajax_i18n/ajaxServlet",
						data:{action:"jQueryAjax"},
						type:"GET",
						success:function (data) {
							$("#msg").html("编号:" + data.id + " 姓名:" + data.name);
						},
						dataType:"json"
					})
});

$g e t 和$ post方法

属性	说明
url	请求的url地址
data	发送的数据
callback	成功的回调函数
type	返回的数据类型

				// ajax--get请求
				$("#getBtn").click(function(){
					$.get("http://localhost:8080/12_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
						$("#msg").html("编号:" + data.id + " 姓名:" + data.name);
					},"json");
				});
				
				// ajax--post请求
				$("#postBtn").click(function(){
					// post请求
					$("#postBtn").click(function(){
						$.post("http://localhost:8080/12_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
							$("#msg").html("编号:" + data.id + " 姓名:" + data.name);
						},"json");
					});
				});

$getJSON方法

属性	说明
url	请求的url地址
data	发送给服务器的数据
callback	成功的回调函数

				// ajax--getJson请求
				$("#getJSONBtn").click(function(){
					// 调用
					$.getJSON("http://localhost:8080/12_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {
						$("#msg").html("编号:" + data.id + " 姓名:" + data.name);
					})
				});

serialize()方法

serialize()方法可以将表单中所有表单项的内容都获取到并拼接成name=value&name=value形式。

				// ajax请求
				$("#submit").click(function(){
					// 把参数序列化
					$.getJSON("http://localhost:8080/12_json_ajax_i18n/ajaxServlet","action=jQuerySericalize&" + $("form01").serialize(),function (data) {
						$("#msg").html("编号:" + data.id + " 姓名:" + data.name);
					});
				});