JSON与AJAX
标签:同步请求 中文 数据类型 log 遍历 转换 gif prot query
JSON
JSON?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析与生成
JSON采用完全独立于语言的文本格式,并且很多语言都支持json(C,C++,C#,Java,JavaScript...)
JSON的格式就是key:value形式,类似于map集合
JSON在JavaScript中的使用
JSON的定义
<script> var jsonObj = { //普通类型 "key1" : 12, "key2" : "aaa", //数组 "key3" : [11,false,"bbb"], //json对象 "key4" :{ "key4_1" : 551, "key4_2" : "key4_2_value" }, //json数组对象 "key5" :[{ "key5_1" : 551, "key5_1" : "key5_1_value" },{ "key5_2" : 551, "key5_2" : "key5_2_value" }] }; </script>
JSON的访问
分别输出上面中的json对象中的属性值
<script> alert(typeof(jsonObj));//json的类型是一个Object //输出普通数据,直接使用json对象名.key值就行 alert(jsonObj.key1); alert(jsonObj.key2); //json的数组遍历 for (let i = 0; i < jsonObj.key3.length; i++) { console.log(jsonObj.key3[i]); } //josn对象中的对象的属性值 console.log(jsonObj.key4.key4_1); console.log(jsonObj.key4.key4_2); // 得到一个json数组,数组中的元素都是一个json对象 alert(jsonObj.key5);//[object Object],[object Object] //遍历去除json对象中的json对象中的属性值,前提是两个json对象的key值要一致 for (let i = 0; i < jsonObj.key5.length; i++) { console.log(jsonObj.key5[i].key5_1+"-->"+jsonObj.key5[i].key5_2); // 555-->key5_1_value // 666-->key5_2_value } </script>
JSON的两个常用方法
json的两种形式:
一种以对象的形式存在,称为json对象;
一种以字符串的形式存在,称为json字符串;
JSON.stringify() 把json 对象转换成为json 字符串
JSON.parse() 把json 字符串转换成为json 对象
<script> //将json对象转换为json字符串 let s = JSON.stringify(jsonObj); alert(s); /* {"key1":12,"key2":"aaa","key3":[11,false,"bbb"],"key4":{"key4_1":551,"key4_2":"key4_2_value"},"key5":[{"key5_1":555,"key5_2":"key5_1_value"},{"key5_1":666,"key5_2":"key5_2_value"}]} */ let parse = JSON.parse(s); alert(parse);//[object Object] </script>
JSON在java中的使用
gson-2.2.4.jar包方式
json字符串与JavaBan对象之间的转换
@Test public void test01(){ //普通的一个JavaBan对象 Person person = new Person("张三",18,"男",178.5); //Gson对象,可以将java对象与json互转的对象 Gson gson = new Gson(); //将JavaBan对象转化为json字符串 String personJson = gson.toJson(person); System.out.println(person);//Person{name=‘张三‘, age=18, sex=‘男‘, height=178.5} System.out.println(personJson);//{"name":"张三","age":18,"sex":"男","height":178.5} //将json字符串转换为JavaBan对象 Person person1 = gson.fromJson(personJson, Person.class); System.out.println(person1);//Person{name=‘张三‘, age=18, sex=‘男‘, height=178.5} }
json字符串与List集合之间的转换
public void test02() { //一个普通的集合,里面装着普通的Java对象 List<Person> list = new ArrayList<>(); list.add(new Person("张三", 18, "男", 178.5)); list.add(new Person("李四", 28, "女", 278.5)); list.add(new Person("王五", 38, "男", 378.5)); //创建Gson对象 Gson gson = new Gson(); //将list集合转换为json字符中, String listJson = gson.toJson(list); System.out.println(listJson); /*[{"name":"张三","age":18,"sex":"男","height":178.5}, {"name":"李四","age":28,"sex":"女","height":278.5}, {"name":"王五","age":38,"sex":"男","height":378.5}]*/ //将json字符串转换为List集合,后面的参数是一个匿名类,这是第一种方法 // List<Person> jsonList = gson.fromJson(listJson, new TypeToken<List<Person>>() {}.getType()); //第二种方法:创建一个类,继承TypeToken类,它的泛型里面就是要转换的集合 //public class JsonList extends TypeToken<List<Person>> {} List<Person> jsonList = gson.fromJson(listJson, new JsonList().getType()); for (Person person : jsonList) { System.out.println(person); /*Person{name=‘张三‘, age=18, sex=‘男‘, height=178.5} Person{name=‘李四‘, age=28, sex=‘女‘, height=278.5} Person{name=‘王五‘, age=38, sex=‘男‘, height=378.5}*/ } }
json字符串与map集合之间的转换
@Test public void test03() { //一个普通的集合,里面装着普通的Java对象 Map<String,Object> map = new HashMap<>(); map.put("小三",new Person("张三", 18, "男", 178.5)); map.put("小四",new Person("李四", 28, "女", 278.5)); map.put("小五",new Person("王五", 38, "男", 378.5)); Gson gson = new Gson(); //map集合转换为json字符串 String mapJson = gson.toJson(map); System.out.println(mapJson); /*{"小三":{"name":"张三","age":18,"sex":"男","height":178.5}, "小四":{"name":"李四","age":28,"sex":"女","height":278.5}, "小五":{"name":"王五","age":38,"sex":"男","height":378.5}}*/ //json字符串转换为Map Map<String,Object> jsonMap = gson.fromJson(mapJson, new TypeToken<Map<String, Object>>() { }.getType()); Set<Map.Entry<String, Object>> entries = jsonMap.entrySet(); for (Map.Entry<String, Object> entry : entries) { System.out.println(entry); /*小三={name=张三, age=18.0, sex=男, height=178.5} 小四={name=李四, age=28.0, sex=女, height=278.5} 小五={name=王五, age=38.0, sex=男, height=378.5}*/ } }
fastjson-1.1.24.jar包的方式
@Test public void test04() { //一个普通的集合,里面装着普通的Java对象 List<Person> list = new ArrayList<>(); list.add(new Person("张三", 18, "男", 178.5)); list.add(new Person("李四", 28, "女", 278.5)); list.add(new Person("王五", 38, "男", 378.5)); //将list集合转换为json字符串 String listJson = JSON.toJSON(list).toString(); System.out.println(listJson); //将json字符串转换为List对List集合 List<Person> JsonList = JSON.parseArray(listJson, Person.class); for (Person person : JsonList) { System.out.println(person); } } @Test public void test05() { //一个普通的集合,里面装着普通的Java对象 Map<String,Object> map = new HashMap<>(); map.put("小三",new Person("张三", 18, "男", 178.5)); map.put("小四",new Person("李四", 28, "女", 278.5)); map.put("小五",new Person("王五", 38, "男", 378.5)); //将Map集合转换为json字符串 Object mapJson = JSON.toJSON(map); System.out.println(mapJson); String mapJsonString = mapJson.toString(); // 将json字符串转换为Map集合,JSON中没有直接对map集合转换的方法,需要下面这种匿名类的方式 Map<String,Object> jsonMap = JSON.parseObject(mapJsonString, new TypeReference<Map<String, Object>>() {}.getType()); Set<Map.Entry<String, Object>> entries = jsonMap.entrySet(); for (Map.Entry<String, Object> entry : entries) { System.out.println(entry);
AJAX
什么是AJAX?
Ajax 即“Asynchronous* Javascript And* XML”(异步 JavaScript 和 XML)
是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页(局部更新页面)的技术
浏览器地址栏不会发生变化
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
原生AJAX
html
<script> function ajaxRequest(){ //首先创建XMLHttpRequest对象 let xmlHttpRequest = new XMLHttpRequest(); //调用open方法设置请求参数 /* * 第一个参数是:请求的方式 * 第二个参数是:请求的地址 * 第三个参数是:是否异步请求 * */ xmlHttpRequest.open("GET","http://localhost:8080/JavaWed4/ajaxServlet?action=javaSciptAjax",true); //为请求绑定onreadystatechange事件,用来处理请求完成后的操作 xmlHttpRequest.onreadystatechange = function (){ /** * readyState 返回一个 XMLHttpRequest 代理当前所处的状态 4代表DONE【请求操作已经完成。这意味着数据传输已经彻底完成或失败】 * status 返回了XMLHttpRequest 响应中的数字状态码 成功返回200 * 下面的代码就是判断状态、响应状态正常后再执行后面的操作 */ if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){ //responseText 从服务器段返回文本 //将服务器传过来的数据转换为json对象 var jsonObj = JSON.parse(xmlHttpRequest.responseText); //输出json对象中的数据 document.getElementById("div1").innerText = "姓名:"+jsonObj.name+",年龄:"+jsonObj.age+",性别:"+jsonObj.sex+",身高:"+jsonObj.height; } } //send方法用于发送 HTTP 请求 //如果是异步请求(默认为异步请求),则此方法会在请求发送后立即返回;如果是同步请求,则此方法直到响应到达后才会返回。 xmlHttpRequest.send(); } </script> <body> <button onclick="ajaxRequest()">AJAX请求</button> <div id="div1"></div> </body>
Servlet程序
@WebServlet("/ajaxServlet") public class AjaxServlet extends BaseDAO { protected void javaSciptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Person person = new Person("张三",18,"男",188.2); //将Java对象昂转换为json字符串 String personJson = JSON.toJSON(person).toString(); //响应 response.getWriter().write(personJson); } }
jQuery中的AJAX
属性介绍:
url:表示请求的地址
type: 表示请求的方式,是GET还是POST
data: 发送给服务器的数据 就是?后面连着的,有两种格式
key=value&key=value
{key:value} 多个使用逗号隔开
success:请求成功后,响应的回调函数
dataType : 响应的数据类型
text【纯文本】xml【xml数据】 json【json对象】
ajax方法
<script> function jQueryAjax(){ $.ajax({ url:"http://localhost:8080/JavaWeb4/ajaxServlet", type:"GET", // data:"action=jQueryAjax", data:{action:"jQueryAjax"}, dataType:"json", success:function (data){//这里要注意一定要有参数,就是响应回来的数据对象 $("#div1").text("姓名:"+data.name+",年龄:"+data.age+",性别:"+data.sex+",身高:"+data.height); } }); } </script> <button onclick="jQueryAjax()">jQueryAjax请求</button>
protected void jQueryAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Person person = new Person("李四", 28, "女", 278.5); //将Java对象昂转换为json字符串 String personJson = JSON.toJSON(person).toString(); //响应 response.getWriter().write(personJson); }
get()、post()方法
四个参数:
请求的地址
请求参数
响应回调函数
响应的数据类型
<script> function getAjax(){ $.get("http://localhost:8080/JavaWeb4/ajaxServlet","action=getAjax",function (data) { $("#div1").text("姓名:"+data.name+",年龄:"+data.age+",性别:"+data.sex+",身高:"+data.height); },"json"); } function postAjax(){ $.post("http://localhost:8080/JavaWeb4/ajaxServlet","action=postAjax",function (data) { $("#div1").text("姓名:"+data.name+",年龄:"+data.age+",性别:"+data.sex+",身高:"+data.height); },"json"); } </script> <button onclick="getAjax()">jQueryAjax请求</button> <button onclick="postAjax()">jQueryAjax请求</button>
getJSON()方法
比get()、post()方法两个方法少一个参数,就是响应的数据类型
默认就是响应的json格式专用方法
<script> function getJSONAjax(){ $.getJSON("http://localhost:8080/JavaWeb4/ajaxServlet","action=postAjax",function (data) { $("#div1").text("姓名:"+data.name+",年龄:"+data.age+",性别:"+data.sex+",身高:"+data.height); }); } </script>
serialize()方法-表单序列化
这个方法可以将form表单中要提交的属性提取出来转换为key=value&key=value形式
<script> function serializeAjax(){ console.log($("#f1").serialize());//注意请求参数后面要加上& $.get("http://localhost:8080/JavaWeb4/ajaxServlet","action=getGet&"+$("#f1").serialize(),function (d) { alert("输出成功!!!!!!!!!!") }); } </script>
它默认会把中文转换为%E形式的数据
标签:同步请求 中文 数据类型 log 遍历 转换 gif prot query
原文地址:https://www.cnblogs.com/MLYR/p/14406812.html