您现在的位置是：主页 > news > 礼品网站制作/苏州网站制作公司

礼品网站制作/苏州网站制作公司

admin2025/5/23 12:31:49【news】

简介礼品网站制作,苏州网站制作公司,wordpress 禁止更新提示,全国装修公司排名JSON JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C, C#, Java, JavaScript, Perl, Python等&#xf…

礼品网站制作,苏州网站制作公司,wordpress 禁止更新提示,全国装修公司排名JSON JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C, C#, Java, JavaScript, Perl, Python等&#xf…

JSON

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python等）。 这样就使得 JSON 成为理想的数据交换格式。
轻量级指的是跟 xml 做比较。数据交换指的是客户端和服务器之间业务数据的传递格式。

JSON 在 JavaScript 中的使用(客户端)

json 的定义
json 是由键值对组成，并且由花括号（大括号）包围。每个键由引号引起来，键和值之间使用冒号进行分隔，多组键值对之间进行逗号进行分隔。
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"}]};
json的访问
json本身是一个对象
json中的 key 我们可以理解为是对象中的一个属性
json中的 key 访问就跟访问对象的属性一样： json对象.key
json 访问示例： 
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对象。
一种是：字符串的形式存在，我们叫它 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);// 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即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
Ajax 请求的局部更新，浏览器地址栏不会发生变化。局部更新不会舍弃原来页面的内容

原生 AJAX 请求的示例*

代码示例：
服务器servlet接收ajax请求
BaseServlet 
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 以及是否异步处理请求。

  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）
send(string)

将请求发送到服务器。

  • string：仅用于 POST 请求

4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。

onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性：

属性描述
onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 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

$.ajax 方法
        url 表示请求的地址
        type 表示请求的类型 GET 或 POST 请求
        data 表示发送给服务器的数据
                格式有两种：
                        一：name=value&name=value
                        二：{key:value}
        success 请求成功响应的回调函数
        dataType 响应的数据类型
                常用的数据类型有：
                        text 表示纯文本
                        xml 表示 xml 数据
                        json 表示 json 对象
如果指定为 json 类型，则会把获取到的数据作为一个 JavaScript 对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，它首先尝试使用 JSON.parse()。
$("#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，不需要再转一遍类型，直接使用更加简单。

$.get 方法和$.post 方法
        url 请求的 url 地址
        data 发送的数据
        callback 成功的回调函数
        type 返回的数据类型
是在ajax方法基础上进一步封装（少了一个请求的类型type） 
// 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");
});
$.getJSON 方法
        url 请求的 url 地址
        data 发送给服务器的数据
        callback 成功的回调函数,data得到的是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()

serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接。
// 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);
});
});

相关文章

最新文章