本文介绍: 介绍JSON和AJAX的概念以及使用

1.JSON

1.1 什么是 JSON?
1.2 在 JavaScript 中的使用
1.2.1 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"
   }]
};
1.2.2 JSON 的访问
alert(typeof(jsonObj));  // object  json就是一个对象
alert(jsonObj.key1);  //12
for(var i = 0; i < jsonObj.key4.length; i++) {
    alert(jsonObj.key4[i]);
}
alert(jsonObj.key5.key5_1);  //551
// 取出来每一个元素都是json对象
var jsonItem = jsonObj.key6[0];
alert( jsonItem.key6_1_1 ); //6611
1.2.3 常用方法
// 把JSON对象转换成为JSON字符串
var jsonObjString = JSON.stringify(jsonObj);  // 特别像Java中对象的toString
alert(jsonObjString)
// 把JSON字符串转换成为JSON对象
var jsonObj2 = JSON.parse(jsonObjString);			
alert(jsonObj2)  // [object Object]
alert(jsonObj2.key1);  // 12
1.3 JSON在 Java 中的使用
1.3.1 javaBean 和 JSON 的互转
public void test1(){
    Person person = new Person(1,"psj");
    // 创建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);
}
// 输出
{"id":1,"name":"psj"}
Person{id=1, name='psj'}
1.3.2 List 和 JSON 的互转
public void test2() {
    List<Person&gt; personList = new ArrayList<&gt;();

    personList.add(new Person(1, "psj"));
    personList.add(new Person(2, "psw"));

    Gson gson = new Gson();
    // 把List转换为json字符
    String personListJsonString = gson.toJson(personList);
    System.out.println(personListJsonString);

    List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());
    System.out.println(list);
    Person person = list.get(0);
    System.out.println(person);
}
// PersonListType类
public class PersonListType extends TypeToken<ArrayList<Person>> {
}
// 输出:
[{"id":1,"name":"psj"},{"id":2,"name":"psw"}]
[Person{id=1, name='psj'}, Person{id=2, name='psw'}]
Person{id=1, name='psj'}
1.3.3 map 和 JSON的互转
public void test3(){
        Map<Integer,Person> personMap = new HashMap<>();

        personMap.put(1, new Person(1, "psj"));
        personMap.put(2, new Person(2, "psw"));

        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, new TypeToken<HashMap<Integer,Person>>(){}.getType());  // 直接使用匿名内部即可

        System.out.println(personMap2);
        Person p = personMap2.get(1);
        System.out.println(p);
}
// PersonMapType类
public class PersonMapType extends TypeToken<HashMap<Integer, Person>> {
}
// 输出:
{"1":{"id":1,"name":"psj"},"2":{"id":2,"name":"psw"}}
{1=Person{id=1, name='psj'}, 2=Person{id=2, name='psw'}}
Person{id=1, name='psj'}

2.AJAX请求

2.1 什么是 AJAX 请求
2.2 jQuery 中的 AJAX 请求
2.2.1 $.ajax 方法
$(function(){
   // ajax请求
   $("#ajaxBtn").click(function(){
      $.ajax({
         url:"http://localhost:8080/JSON_AJAX/ajaxServlet",
         // data:"action=jQueryAjax",
         data:{action:"jQueryAjax"},
         type:"GET",
         // 这个data返回的数据,不是上面的data属性
         success:function (data) {
             // 当dataTye是text时,需要执行下面两句将字符串转换为Jsond对象
             // alert("服务器返回的数据是:" + data);
             // var jsonObj = JSON.parse(data);
             // 当dataTye是json时,data就是json对象,可直接使用
             $("#msg").html(" ajax 编号:" + data.id + " , 姓名:" + data.name);
         },
         dataType : "json"
      });
   });
});
protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("  jQueryAjax == 方法调用了");
    Person person = new Person(1, "psj");
    // json格式的字符串
    Gson gson = new Gson();
    String personJsonString = gson.toJson(person);
    resp.getWriter().write(personJsonString);
}
<div>
    <button id="ajaxBtn">$.ajax请求</button>
    <button id="getBtn">$.get请求</button>
    <button id="postBtn">$.post请求</button>
    <button id="getJSONBtn">$.getJSON请求</button>
</div>
<div id="msg">
2.2.2 $.get 方法和$.post 方法
// ajax--get请求
$("#getBtn").click(function(){
   $.get("http://localhost:8080/JSON_AJAX/ajaxServlet","action=jQueryGet",function (data) {
      $("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name);
   },"json");
   
});
// ajax--post请求
$("#postBtn").click(function(){
   // post请求
   $.post("http://localhost:8080/JSON_AJAX/ajaxServlet","action=jQueryPost",function (data) {
      $("#msg").html(" post 编号:" + data.id + " , 姓名:" + data.name);
   },"json");
   
});
protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("  jQueryPost   == 方法调用了");
    Person person = new Person(1, "psj");
    // 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, "psj");
    // json格式的字符串
    Gson gson = new Gson();
    String personJsonString = gson.toJson(person);
    resp.getWriter().write(personJsonString);
}
2.2.3 $.getJSON 方法
// ajax--getJson请求
$("#getJSONBtn").click(function(){
   $.getJSON("http://localhost:8080/JSON_AJAX/ajaxServlet","action=jQueryGetJSON",function (data) {
      $("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name);
   });
});
protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("  jQueryGetJSON   == 方法调用了");
    Person person = new Person(1, "psj");
    // json格式的字符串
    Gson gson = new Gson();
    String personJsonString = gson.toJson(person);
    resp.getWriter().write(personJsonString);
}
2.2.4 表单序列化 serialize()
// ajax请求
$("#submit").click(function(){
   // 把表单进行参数序列化,执行$("#form01").serialize()后会把表单中的username="xxx"等以拼接的形式组合传给服务
   $.getJSON("http://localhost:8080/JSON_AJAX/ajaxServlet","action=jQuerySerialize&amp;" + $("#form01").serialize(),function (data) {
      $("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name);
   });
});
<form id="form01" >
   用户名<input name="username" type="text" /><br/>
   密码<input name="password" type="password" /><br/>
   下拉单选<select name="single">
      <option value="Single">Single</option>
      <option value="Single2">Single2</option>
   </select><br/>
   下拉多选<select name="multiple" multiple="multiple">
       <option selected="selected" value="Multiple">Multiple</option>
       <option value="Multiple2">Multiple2</option>
       <option selected="selected" value="Multiple3">Multiple3</option>
   </select><br/>
   复选:
   <input type="checkbox" name="check" value="check1"/> check1
   <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
   单选<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
   <input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
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, "psj");
    // json格式的字符串
    Gson gson = new Gson();
    String personJsonString = gson.toJson(person);
    resp.getWriter().write(personJsonString);
}

原文地址:https://blog.csdn.net/qq_41398418/article/details/123826712

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_37286.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注