应持续抓好二级网站的建设工作,东莞合迅设计有限公司,全国公共资源交易平台官网,如何自己建个网站305.JSON-什么是JSON
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式#xff0c;而且很多语言都提供了对 json 的支持#xff08;包括 C, C, C#, Java, JavaScript, Perl,…305.JSON-什么是JSON
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式而且很多语言都提供了对 json 的支持包括 C, C, C#, Java, JavaScript, Perl, Python 等。 这样就使得 JSON 成为理想的数据交换格式。
json 是一种轻量级的数据交换格式。 轻量级指的是跟 xml 做比较。 数据交换指的是客户端和服务器之间业务数据的传递格式。
306.JSON-JSON的定义和访问
json 的定义 json 是由键值对组成并且由花括号大括号包围。每个键由引号引起来键和值之间使用冒号进行分隔 多组键值对之间进行逗号进行分隔。
json 的访问 json 本身是一个对象。 json 中的 key 我们可以理解为是对象中的一个属性。 json 中的 key 访问就跟访问对象的属性一样 json 对象.key
json 示例
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
htmlheadmeta http-equivpragma contentno-cache /meta http-equivcache-control contentno-cache /meta http-equivExpires content0 /meta http-equivContent-Type contenttext/html; charsetUTF-8titleInsert title here/titlescript typetext/javascript// json的定义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); //12alert(jsonObj.key2); // abcalert(jsonObj.key3); // truealert(jsonObj.key4);// 得到数组[11,arr,false]// json 中 数组值的遍历for(var i 0; i jsonObj.key4.length; i) {alert(jsonObj.key4[i]);}alert(jsonObj.key5.key5_1);//551alert(jsonObj.key5.key5_2);//key5_2_valuealert( jsonObj.key6 );// 得到json数组// 取出来每一个元素都是json对象var jsonItem jsonObj.key6[0];alert( jsonItem.key6_1_1 ); //6611alert( jsonItem.key6_1_2 ); //key6_1_2_valuealert(jsonObj);// 把json对象转换成为 json字符串var jsonObjString JSON.stringify(jsonObj); // 特别像 Java中对象的toStringalert(jsonObjString)// 把json字符串。转换成为json对象var jsonObj2 JSON.parse(jsonObjString);alert(jsonObj2.key1);// 12alert(jsonObj2.key2);// abc/script/headbody/body
/html307.JSON-JSON在JavaScript中两种常用的转换方法
json 的存在有两种形式 对象我们叫它 json 对象一般我们要操作 json 中的数据的时候使用 字符串我们叫它 json 字符串客户端和服务器之间进行数据交换的时候使用
JSON.stringify()把 json 对象转换成为 json 字符串 JSON.parse()把 json 字符串转换成为 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);// abc308.JSON-JavaBean和json的相互转换
javaBean和json的互转
import com.atguigu.pojo.Person;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import org.junit.Test;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;public class JsonTest {Testpublic 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);}
} Person实体类Bean
package com.atguigu.pojo;public class Person {private Integer id;private String name;public Person() {}public Person(Integer id, String name) {this.id id;this.name name;}public Integer getId() {return id;}public void setId(Integer id) {this.id id;}public String getName() {return name;}public void setName(String name) {this.name name;}Overridepublic String toString() {return Person{ id id , name name \ };}
}309.JSON-List集合和json的相互转换
List 和json的互转 Testpublic void test2() {ListPerson 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// 把json字符串转换ListListPerson list gson.fromJson(personListJsonString, new PersonListType().getType());//准确的转化为Person需要PersonListTypeSystem.out.println(list);Person person list.get(0);System.out.println(person);}package com.atguigu.json;import com.atguigu.pojo.Person;
import com.google.gson.reflect.TypeToken;
import java.util.ArrayList;public class PersonListType extends TypeTokenArrayListPerson {
}310.JSON-Map集合和json的相互转换
map 和json的互转 Testpublic void test3(){MapInteger,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);// MapInteger,Person personMap2 gson.fromJson(personMapJsonString, new PersonMapType().getType());MapInteger,Person personMap2 gson.fromJson(personMapJsonString, new TypeTokenHashMapInteger,Person(){}.getType());//准确转换需要PersonMapType System.out.println(personMap2);Person p personMap2.get(1);System.out.println(p);}package com.atguigu.json;import com.atguigu.pojo.Person;
import com.google.gson.reflect.TypeToken;
import java.util.HashMap;public class PersonMapType extends TypeTokenHashMapInteger, Person {
}311.AJAX-什么是AJAX请求
AJAX 即“Asynchronous Javascript And XML”异步 JavaScript 和 XML是指一种创建交互式网页应用的网页开发技术。
ajax 是一种浏览器通过 JS 异步发起请求局部更新页面的技术。
Ajax 请求的局部更新浏览器地址栏不会发生变化 局部更新不会舍弃原来页面的内容
312.AJAX-原生JavaScript的AJAX请求示例
1、我们首先要创建XMLHttpRequest 2、调用open方法设置请求参数请求方式、请求地址、true异步false同步 3、在send方法前绑定onreadystatechange事件处理请求完成后的操作 4、调用send方法发送请求
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
htmlheadmeta http-equivpragma contentno-cache /meta http-equivcache-control contentno-cache /meta http-equivExpires content0 /meta http-equivContent-Type contenttext/html; charsetUTF-8titleInsert title here/titlescript typetext/javascript// 在这里使用javaScript语言发起Ajax请求访问服务器AjaxServlet中javaScriptAjaxfunction ajaxRequest() {
// 1、我们首先要创建XMLHttpRequest var xmlhttprequest new XMLHttpRequest();
// 2、调用open方法设置请求参数xmlhttprequest.open(GET,http://localhost:8080/16_json_ajax_i18n/ajaxServlet?actionjavaScriptAjax,true);
// 4、在send方法前绑定onreadystatechange事件处理请求完成后的操作。xmlhttprequest.onreadystatechange function(){if (xmlhttprequest.readyState 4 xmlhttprequest.status 200) {//请求成功之后readyState 的值会改变alert(收到服务器返回的数据 xmlhttprequest.responseText);var jsonObj JSON.parse(xmlhttprequest.responseText);// 把响应的数据显示在页面上document.getElementById(div01).innerHTML 编号 jsonObj.id , 姓名 jsonObj.name;}}
// 3、调用send方法发送请求xmlhttprequest.send();alert(我是最后一行的代码);}/script/headbody
!-- a hrefhttp://localhost:8080/16_json_ajax_i18n/ajaxServlet?actionjavaScriptAjax非Ajax/a--button onclickajaxRequest()ajax request/buttondiv iddiv01/divtable border1trtd1.1/tdtd1.2/td/trtrtd2.1/tdtd2.2/td/tr/table/body
/htmlAjaxServlet
package com.atguigu.servlet;import com.atguigu.pojo.Person;
import com.google.gson.Gson;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;public class AjaxServlet extends BaseServlet {protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println(Ajax请求过来了);Person person new Person(1, 国哥);try {Thread.sleep(3000);} catch (InterruptedException e) {e.printStackTrace();}// json格式的字符串Gson gson new Gson();String personJsonString gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println( jQueryAjax 方法调用了);Person person new Person(1, 国哥);// json格式的字符串Gson gson new Gson();String personJsonString gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println( jQueryGet 方法调用了);Person person new Person(1, 国哥);// json格式的字符串Gson gson new Gson();String personJsonString gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println( jQueryPost 方法调用了);Person person new Person(1, 国哥);// json格式的字符串Gson gson new Gson();String personJsonString gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println( jQueryGetJSON 方法调用了);Person person new Person(1, 国哥);// json格式的字符串Gson gson new Gson();String personJsonString gson.toJson(person);resp.getWriter().write(personJsonString);}protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {System.out.println( jQuerySerialize 方法调用了);System.out.println(用户名 req.getParameter(username));System.out.println(密码 req.getParameter(password));Person person new Person(1, 国哥);// json格式的字符串Gson gson new Gson();String personJsonString gson.toJson(person);resp.getWriter().write(personJsonString);}
}BaseServlet
package com.atguigu.servlet;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Method;public abstract class BaseServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 解决post请求中文乱码问题// 一定要在获取请求参数之前调用才有效req.setCharacterEncoding(UTF-8);// 解决响应中文乱码resp.setContentType(text/html; charsetUTF-8);String action req.getParameter(action);try {// 获取action业务鉴别字符串获取相应的业务 方法反射对象Method method this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
// System.out.println(method);// 调用目标业务 方法method.invoke(this, req, resp);} catch (Exception e) {e.printStackTrace();throw new RuntimeException(e);// 把异常抛给Filter过滤器}}
}313.AJAX-AJAX请求的特点说明
Ajax 请求的局部更新浏览器地址栏不会发生变化 局部更新不会舍弃原来页面的内容
同步时请求没有结束下面的代码都不能执行。当有好多按钮只能等一个按钮执行完才能点其它按钮
314.AJAX-jQuery的ajax方法
$.ajax 方法
属性作用url表示请求的地址type表示请求的类型 GET 或 POST 请求data表示发送给服务器的数据success请求成功响应的回调函数dataType响应的数据类型
data格式有两种 1、namevaluenamevalue 2、{key:value}
dataType常用的数据类型有 text 表示纯文本 xml 表示 xml 数据 json 表示 json 对象 // ajax请求$(#ajaxBtn).click(function(){$.ajax({url:http://localhost:8080/16_json_ajax_i18n/ajaxServlet,//请求地址// data:actionjQueryAjax,data:{action:jQueryAjax},//请求的方法type:GET,//请求类型success:function (data) {//成功的回调函数// alert(服务器返回的数据是 data);// var jsonObj JSON.parse(data);$(#msg).html( ajax 编号 data.id , 姓名 data.name);},dataType : json//直接用json不需要自己转了});});!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd
htmlheadmeta http-equivpragma contentno-cache /meta http-equivcache-control contentno-cache /meta http-equivExpires content0 /meta http-equivContent-Type contenttext/html; charsetUTF-8titleInsert title here/titlescript typetext/javascript srcscript/jquery-1.7.2.js/scriptscript typetext/javascript$(function(){// ajax请求$(#ajaxBtn).click(function(){$.ajax({url:http://localhost:8080/16_json_ajax_i18n/ajaxServlet,// data:actionjQueryAjax,data:{action:jQueryAjax},type:GET,success:function (data) {// alert(服务器返回的数据是 data);// var jsonObj JSON.parse(data);$(#msg).html( ajax 编号 data.id , 姓名 data.name);},dataType : json});});// ajax--get请求$(#getBtn).click(function(){$.get(http://localhost:8080/16_json_ajax_i18n/ajaxServlet,actionjQueryGet,function (data) {$(#msg).html( get 编号 data.id , 姓名 data.name);},json);});// ajax--post请求$(#postBtn).click(function(){// post请求$.post(http://localhost:8080/16_json_ajax_i18n/ajaxServlet,actionjQueryPost,function (data) {$(#msg).html( post 编号 data.id , 姓名 data.name);},json);});// ajax--getJson请求$(#getJSONBtn).click(function(){$.getJSON(http://localhost:8080/16_json_ajax_i18n/ajaxServlet,actionjQueryGetJSON,function (data) {$(#msg).html( getJSON 编号 data.id , 姓名 data.name);});});// ajax请求$(#submit).click(function(){// 把参数序列化$.getJSON(http://localhost:8080/16_json_ajax_i18n/ajaxServlet,actionjQuerySerialize $(#form01).serialize(),function (data) {$(#msg).html( Serialize 编号 data.id , 姓名 data.name);});});});/script/headbodydivbutton idajaxBtn$.ajax请求/buttonbutton idgetBtn$.get请求/buttonbutton idpostBtn$.post请求/buttonbutton idgetJSONBtn$.getJSON请求/button/divdiv idmsg/divbr/br/form idform01 用户名input nameusername typetext /br/密码input namepassword typepassword /br/下拉单选select namesingleoption valueSingleSingle/optionoption valueSingle2Single2/option/selectbr/下拉多选select namemultiple multiplemultipleoption selectedselected valueMultipleMultiple/optionoption valueMultiple2Multiple2/optionoption selectedselected valueMultiple3Multiple3/option/selectbr/复选input typecheckbox namecheck valuecheck1/ check1input typecheckbox namecheck valuecheck2 checkedchecked/ check2br/单选input typeradio nameradio valueradio1 checkedchecked/ radio1input typeradio nameradio valueradio2/ radio2br//formbutton idsubmit提交--serialize()/button/body
/html315.AJAX-jQuery的get和post方法
get 方法和post 方法
属性作用url请求的 url 地址data发送的数据callback成功的回调函数type返回的数据类型// ajax--get请求$(#getBtn).click(function(){$.get(http://localhost:8080/16_json_ajax_i18n/ajaxServlet,actionjQueryGet,function (data) { $(#msg).html( get 编号 data.id , 姓名 data.name);},json);});// ajax--post请求$(#postBtn).click(function(){// post请求$.post(http://localhost:8080/16_json_ajax_i18n/ajaxServlet,actionjQueryPost,function (data) {$(#msg).html( post 编号 data.id , 姓名 data.name);},json);});316.AJAX-jQuery的getJSON方法
$.getJSON 方法
属性作用url请求的 url 地址data发送给服务器的数据callback成功的回调函数
// ajax--getJson请求
$(#getJSONBtn).click(function(){$.getJSON(http://localhost:8080/16_json_ajax_i18n/ajaxServlet,actionjQueryGetJSON,function (data) {$(#msg).html( getJSON 编号 data.id , 姓名 data.name);});
});317.AJAX-jQuery的serialize方法
可以把表单中所有表单项的内容都获取到并以 namevaluenamevalue 的形式进行拼接。
// ajax请求
$(#submit).click(function(){// 把参数序列化//可以得到表单form01格式为namevalue的参数//$(#form01).serialize()$.getJSON(http://localhost:8080/16_json_ajax_i18n/ajaxServlet,actionjQuerySerialize $(#form01).serialize(),function (data) {$(#msg).html( Serialize 编号 data.id , 姓名 data.name);});
});
