JavaWeb--JSON&AJAX

2021-05-03 16:05:34 阅读：230 来源： 互联网

标签：jsonObj 请求 -- json JSON AJAX new data

JSON&AJAX

JSON

1. 什么是JSON？

JSON（JavaScript Object Notation）是一种轻量级的（相较xml而言）数据交换格式，易于人阅读和编写，同时也易于机器解析和生成；JSON采用完全独立于语言的文本格式，并且很多语言都提供了对JSON的支持（包括C、C++、Java、JavaScript、Perl、Python等），这使得JSON成为理想的数据交换格式

2. JSON在JavaScript中的使用

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可以理解为对象中的一个属性，访问key就类似访问对象的属性：JSON对象.key

示例：

// json的访问
alert(typeof(jsonObj)); //json是一个对象
alert(jsonObj.key1);
alert(jsonObj.key5.key5_1);
alert(jsonObj.key6.length);
alert(jsonObj.key6[0]);
alert(jsonObj.key6[0].key6_1_2);

JSON的两个常用方法

JSON有两种存在形式

以对象的形式存在
以字符串的形式存在

一般在操作JSON中的数据时，需要JSON以对象的形式存在，而在客户端与服务器交换数据时，需要JSON以字符串的形式存在

两个方法：

JSON.stringfy() 将JSON对象转换为JSON字符串

JSON.parse() 将JSON字符串转换为JSON对象

示例：

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

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

3. JSON在Java中的使用

JavaBean和JSON的互相转化

//1. javaBean和json的互相转换
@Test
public void test1(){
    Person person = new Person(1, "三上悠亚");
    //json操作，首先需要有一个gson对象
    Gson gson = new Gson();

    //将javaBean对象转换成为json字符串
    String pjStr = gson.toJson(person);
    System.out.println(pjStr);

    //将json字符串转换成为javaBean对象
    Person person1 = gson.fromJson(pjStr, Person.class);
    System.out.println(person1);
}

List集合和JSON的互相转化

//2. list和json的互相转换
@Test
public void test2(){
    List<Person> personList = new ArrayList<>();

    personList.add(new Person(1,"三上悠亚"));
    personList.add(new Person(2,"天使萌"));

    Gson gson = new Gson();

    //将list集合转换为json字符串
    String pLJStr = gson.toJson(personList);
    System.out.println(pLJStr);

    //将json字符串转换为list集合
    //使用匿名内部类new TypeToken<List<Person>>() {}.getType()传入Type类型的参数
    List<Person> personList2 = gson.fromJson(pLJStr, new TypeToken<List<Person>>() {}.getType());
    System.out.println(personList2);
    Person person = personList2.get(0);
    System.out.println(person);
}

Map和JSON的互相转化

//3. map和json的互相转换
@Test
public void test3(){
    Map<Integer,Person> personMap = new HashMap<>();

    personMap.put(1,new Person(1,"三上悠亚"));
    personMap.put(2,new Person(1,"桥本有菜"));

    Gson gson = new Gson();

    //将map集合转换为json字符串
    String mJStr = gson.toJson(personMap);
    System.out.println(mJStr);

    //将json字符串转换为map集合
    Map<Integer,Person> personMap1 = gson.fromJson(mJStr,new TypeToken<Map<Integer,Person>>(){}.getType());
    System.out.println(personMap1);
    Person person = personMap1.get(1);
    System.out.println(person);
}

AJAX

1. 什么是AJAX请求？

AJAX即”Asynchronous JavaScript And XML“（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术；通过JS异步发起请求，可以实现页面的局部更新

AJAX请求的局部更新不会使浏览器地址栏发生变化，也不会舍弃原来页面的内容

2. 原生AJAX请求

示例：

<!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() {
//              1、我们首先要创建XMLHttpRequest 
            var xHR = new XMLHttpRequest();
//              2、调用open方法设置请求参数
            xHR.open("GET","http://localhost:8080/11_json_ajax/ajaxServlet?action=javaScriptAjax",true);
//              4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
            xHR.onreadystatechange = function () {
               if(xHR.readyState == 4 && xHR.status == 200){
                  // alert(xHR.responseText);

                  //把响应的数据显示在页面上
                  var jsonObj = JSON.parse(xHR.responseText);
                  document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + "，姓名：" + jsonObj.name;

               }
            }
//              3、调用send方法发送请求
            xHR.send();
//
         }
      </script>
   </head>
   <body> 
      <button onclick="ajaxRequest()">ajax request</button>
      <div id="div01">
      </div>
   </body>
</html>

Servlet程序：

protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        System.out.println("Ajax请求");

        Person person = new Person(1,"相泽南");

        Gson gson = new Gson();
        String pJStr = gson.toJson(person);

        resp.getWriter().write(pJStr);
    }

3. jQuery中的AJAX请求

$.ajax方法

url：请求的地址

type：请求的类型，GET或POST请求

data：发送给服务器的数据

格式有两种：

一、name=value&name=value

二、{key:value}

success：请求成功之后响应的回调函数

dataType：响应的数据类型

常见的数据类型有：

text：纯文本

xml：xml数据

json：json对象

// ajax请求
$("#ajaxBtn").click(function(){
   
   $.ajax({
      url:"http://localhost:8080/11_json_ajax/ajaxServlet",
      data:"action=jQueryAjax",
      type:"GET",
      success:function (data) {

         // var jsonObj = JSON.parse(data);
         // $("#msg").html("编号：" + jsonObj.id + "，姓名：" + jsonObj.name);
         $("#msg").html("Ajax编号：" + data.id + "，姓名：" + data.name);
      },
      // dataType:"text"
      dataType:"json"
   });
});

$.get方法和$.post方法

url：请求的url地址

data：发送给服务器的数据

callback：请求成功之后响应的回调函数

type：返回的数据类型

// ajax--get请求
$("#getBtn").click(function(){

   $.get("http://localhost:8080/11_json_ajax/ajaxServlet","action=jQueryAjaxGet",function (data) {
      $("#msg").html("Get编号：" + data.id + "，姓名：" + data.name);
   },"json");
   
});

// ajax--post请求
$("#postBtn").click(function(){
   // post请求

   $.get("http://localhost:8080/11_json_ajax/ajaxServlet","action=jQueryAjaxPost",function (data) {
      $("#msg").html("Post编号：" + data.id + "，姓名：" + data.name);
   },"json");
});

$.getJSON方法

url：请求的url地址

data：发送给服务器的数据

callback：请求成功之后响应的回调函数

// ajax--getJson请求
$("#getJSONBtn").click(function(){
   // 调用

   $.getJSON("http://localhost:8080/11_json_ajax/ajaxServlet","action=jQueryAjaxGetJson",function (data) {
      $("#msg").html("GetJson编号：" + data.id + "，姓名：" + data.name);
   })

});

表单序列化serialize()

serialize()可以把表单中所有表单项的内容都获取到，并以name=value&name=value的形式进行拼接

// ajax请求
$("#submit").click(function(){
   // 把参数序列化
   // alert($("#form01").serialize());
   $.getJSON("http://localhost:8080/11_json_ajax/ajaxServlet","action=jQueryAjaxSerialize&" + $("#form01").serialize(),function (data) {

      $("#msg").html("Serialize编号：" + data.id + "，姓名：" + data.name);
   })
});

Servlet程序：

protected void jQueryAjaxSerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("jQueryAjaxSerialize请求");

    System.out.println("用户名：" + req.getParameter("username"));
    System.out.println("密码：" + req.getParameter("password"));

    Person person = new Person(1,"相泽南");

    Gson gson = new Gson();
    String pJStr = gson.toJson(person);

    resp.getWriter().write(pJStr);
}

标签：jsonObj,请求,--,json,JSON,AJAX,new,data
来源： https://www.cnblogs.com/th1024/p/14727566.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaWeb--JSON&AJAX

JSON&AJAX

JSON

1. 什么是JSON？

2. JSON在JavaScript中的使用

3. JSON在Java中的使用

AJAX

1. 什么是AJAX请求？

2. 原生AJAX请求

3. jQuery中的AJAX请求