您现在的位置是:主页 > news > 礼品网站制作/苏州网站制作公司
礼品网站制作/苏州网站制作公司
admin2025/5/23 12:31:49【news】
简介礼品网站制作,苏州网站制作公司,wordpress 禁止更新提示,全国装修公司排名JSON JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式,而且很多语言都提供了对 json 的支持(包括 C, C, C#, Java, JavaScript, Perl, Python等…
JSON
JSON 在 JavaScript 中的使用(客户端)
var jsonObj = {"key1":12,"key2":"abc","key3":true,"key4":[11,"arr",false],"key5":{"key5_1" : 551,"key5_2" : "key5_2_value"},"key6":[{"key6_1_1":6611,"key6_1_2":"key6_1_2_value"},{"key6_2_1":6621,"key6_2_2":"key6_2_2_value"}]};
alert(typeof(jsonObj));// object json 就是一个对象alert(jsonObj.key1); //12
alert(jsonObj.key2); // abc
alert(jsonObj.key3); // true
alert(jsonObj.key4);// 得到数组[11,"arr",false]// json 中 数组值的遍历
for(var i = 0; i < jsonObj.key4.length; i++) {alert(jsonObj.key4[i]);
}
alert(jsonObj.key5.key5_1);//551
alert(jsonObj.key5.key5_2);//key5_2_value
alert( jsonObj.key6 );// 得到 json 数组
// 取出来每一个元素都是 json 对象
var jsonItem = jsonObj.key6[0];
// alert( jsonItem.key6_1_1 ); //6611
alert( jsonItem.key6_1_2 ); //key6_1_2_value
json的两个常用方法
// 把 json 对象转换成为 json 字符串
var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java 中对象的 toString
alert(jsonObjString)
// 把 json 字符串。转换成为 json 对象
var jsonObj2 = JSON.parse(jsonObjString);
alert(jsonObj2.key1);// 12
alert(jsonObj2.key2);// abc
JSON在java中的使用(服务器端)
需要使用json的jar包,此处使用谷歌提供的gson-2.2.4.jar
javaBean和json的互转
toJson可以把 java 对象转换成为 json 字符
fromJson方法把 json 字符串转换回 Java 对象
参数.class是给转成一个javabean使用的,如果是转成list或map,参数要为type类型
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 的互转
参数要为type类型,使用前提:需要创建一个继承jar包内的TypeToken的类。
public class PersonListType extends TypeToken<List<Person>>{//泛型是要将字符串转换回去的具体类型//不用具体代码
}
// 1.2.2、List 和 json 的互转@Testpublic void test2() {List<Person> personList = new ArrayList<>();personList.add(new Person(1, "国哥"));personList.add(new Person(2, "康师傅"));Gson gson = new Gson();// 把 List 转换为 json 字符串String personListJsonString = gson.toJson(personList);System.out.println(personListJsonString);//把json字符串转换为List List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());System.out.println(list);Person person = list.get(0);System.out.println(person);
}
可以使用匿名类进行优化
map和json的互转
//public class PersonListType extends TypeToken<HashMap<Integer,Person>>{//泛型是要将字符串转换回去的具体类型//不用具体代码
//}
// 1.2.3、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();// 把 map 集合转换成为 json 字符串String personMapJsonString = gson.toJson(personMap);System.out.println(personMapJsonString);// Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new//PersonMapType().getType());//使用匿名内部类Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, newTypeToken<HashMap<Integer,Person>>(){}.getType());System.out.println(personMap2);Person p = personMap2.get(1);System.out.println(p);
}
AJAX 请求
原生 AJAX 请求的示例*
public abstract class BaseServlet extends HttpServlet {protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("UTF-8");String action = req.getParameter("action");try {Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);method.invoke(this, req, resp);} catch (Exception e) {e.printStackTrace();throw new RuntimeException(e);}}
}
AjaxServlet
public class AjaxServlet extends BaseServlet {protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//System.out.println("Ajax请求");response.setContentType("text/html;charset=UTF-8");Person1 person= new Person1(1, "yangin");//服务器响应请求返回数据,响应的数据格式为json格式的字符串Gson gson = new Gson();String personJsonString = gson.toJson(person);response.getWriter().write(personJsonString);}
}
web.xml中配置地址
<servlet><servlet-name>AjaxServlet</servlet-name><servlet-class>servlet.AjaxServlet</servlet-class></servlet><servlet-mapping><servlet-name>AjaxServlet</servlet-name><url-pattern>/ajaxServlet</url-pattern></servlet-mapping>
发起Ajax请求 ajax.html
请求发给服务器,服务器响应请求返回数据,响应的数据格式为json格式的字符串。如需获取来自服务器的响应,使用xmlhttprequest对象的responseText。
1、我们首先要创建XMLHttpRequest var xmlhttprequest=new XMLHttpRequest();
2、调用open方法设置请求参数
3、调用send方法发送请求
方法 | 描述 |
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
send(string) | 将请求发送到服务器。
|
4、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性:
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 200: "OK" 404: 未找到页面 |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Insert title here</title><script type="text/javascript">// 在这里使用 javaScript 语言发起 Ajax 请求,访问服务器 AjaxServlet 中 javaScriptAjaxfunction ajaxRequest() {// 1、我们首先要创建 XMLHttpRequestvar xmlhttprequest = new XMLHttpRequest();// 2、调用 open 方法设置请求参数xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true)// 4、在 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;}}// 3、调用 send 方法发送请求xmlhttprequest.send();}</script>
</head>
<body><button onclick="ajaxRequest()">ajax request</button><div id="div01"></div>
</body>
</html>
AJAX请求的特点说明
局部更新和非局部更新
<a href="http://localhost:8080/json_ajax/ajaxServlet?action=javaScriptAjax">非ajax</a>
<button onclick="ajaxRequest()">ajax request</button>
![]() | |
综上:Ajax 请求的局部更新,浏览器地址栏不会发生变化。局部更新不会舍弃原来页面的内容
xmlHttpRequest.open("Get","http://localhost:8080/json_ajax/ajaxServlet?action=javaScriptAjax",false);
异步改为同步。让服务器休眠3s。发现ajax代码没运行完的话下面的代码都不能执行。异步提升用户体验,不影响其他功能的交互。
jQuery 中的 AJAX 请求
开发中我们基本使用javascript框架实现ajax请求。常用jquery
$("#ajaxBtn").click(function(){$.ajax({url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",// data:"action=jQueryAjax",data:{action:"jQueryAjax"},type:"GET",success:function (data) {// alert("服务器返回的数据是:" + data);// var jsonObj = JSON.parse(data);$("#msg").html("编号:" + data.id + " , 姓名:" + data.name);},dataType : "json"});
});
dataType选择text纯文本,传过来的数据需要转成json对象,如果是json,不需要再转一遍类型,直接使用更加简单。
// ajax--get 请求
$("#getBtn").click(function(){$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {$("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name);},"json");
});// ajax--post 请求
$("#postBtn").click(function(){$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data){$("#msg").html(" post 编号:" + data.id + " , 姓名:" + data.name);},"json");
});
// ajax--getJson 请求
$("#getJSONBtn").click(function(){$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function(data) {$("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name);});
});
该函数是简写的 Ajax 函数,等价于:
$.ajax({url: url,data: data,success: callback,dataType: json
});
表单序列化 serialize()
// ajax 请求
$("#submit").click(function(){
// 把参数序列化$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" +
$("#form01").serialize(),function (data) {$("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name);
});
});