jQuery操作JSON、服务端操作JSON（Servlet、SpringMVC）

分手后的思念是犯贱 2022-07-13 08:40 223阅读 0赞

## **JSON数据格式** ##

javascript对象类型格式

var v ={key1:value1,key2:value2.....}

v.key1//就是获取key1对应的value值

var v =
    [
    {
       name:”cat”,age:12},
    {
       name:”dog”,age:10}
    ]

**访问JSON对象数组**  
**v\[0\].name//就是获取的第一个的以key是name的value**  
里面还可以继续放继续对应.来获取

**要注意不要把jQ与js的一些方法弄混了。**  
注意用jQ选择器获取的对象就用jQ对象的方法像 .val();  
而直接用js的就是.value;

**例子**  
**利用jQuery解析JSON创建option**（选择的）

![这里写图片描述][SouthEast]

**添加选中后会显示在后面：**

**1.触发事件源**  
下拉选择框$(“\#s1”)  
**2.触发事件时机**  
onchange选项发生改变  
**3.执行什么样的操作**  
提取当前选中的option内容，并将内容显示到span中

![这里写图片描述][SouthEast 1]

**选中后在下面的ul中增加对应的**

即在上面的js中增加

![这里写图片描述][SouthEast 2]

若想要清空 ul

$(“#s_ul”).empty();

或者`$(“#s_ul li”).remove()`

## 服务端操作json ##

**例子：显示笔记信息**  
先用servlet测试  
客户端以ajax发请求  
写一个html  
写一个servlet  
写一个实体类 Note  
利用第三方来实现把实体类转成 JSON格式

json\_jar下载地址：

[http://download.csdn.net/download/lablenet/9002259][http_download.csdn.net_download_lablenet_9002259]  
将jar导入lib

note.setName("java");
            //将note对象转成json
            //利用JSONObject
            JSONObject json = new JSONObject().fromObject(note);
            //将其变成json字符串
            String json_str = json.toString();
            System.out.println(json_str);
            out.print(json_str);

**其servlet：**

package servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import net.sf.json.JSONObject;
    
    import entity.Note;
    
    public class demoservlet1 extends HttpServlet { 
    
        public void service(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setCharacterEncoding("utf-8");
            PrintWriter out = response.getWriter();
            //将笔记信息以json格式输出
            Note note = new Note();
            note.setId("01");
            note.setName("java");
            //将note对象转成json
            //利用JSONObject
            JSONObject json = new JSONObject().fromObject(note);
            //将其变成json字符串
            String json_str = json.toString();
            System.out.println(json_str);
            out.print(json_str);
    
            out.flush();
            out.close();
        }
    
    }

![这里写图片描述][SouthEast 3]

## **将一个list转成json** ##

//将list转成json字符串
    
            JSONArray json = JSONArray.fromObject(list);
    
            String json_str = json.toString();
            System.out.println(json_str);
            out.print(json_str);

![这里写图片描述][SouthEast 4]

## ajax异步提交 ##

<!DOCTYPE html>
    <html>
      <head>
        <title>demo2l</title>
    
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
        
    
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    
    
    <script type="text/javascript"> $(function(){ $("#loadNoteBtn").click(function(){ //发送ajax请求 $.ajax({ url:"servlet/demoservlet1", type:"get", dataType:"json", success:function (result){ //result是服务器返回的json字符串转成的json对象 //清除原有的li $("#note_list").empty();//防止一直增加 for(var i=0;i<result.length;i++){ var id =result[i].id; var name = result[i].name; //拼个li var s_li = "<li>"+name+"</li>"; var $li =$(s_li);//将字符串转成jQuery $li.data("noteId",id);//赋给其id值 //将$li添加到ul列表中 $("#note_list").append($li); } } }); }); }); </script>
    
    
      </head>
    
      <body>
    
    <input type="button" value="显示笔记列表" id="loadNoteBtn">
    <hr/>
    <ul id="note_list">
    
    </ul>
    
      </body>
    </html>

![这里写图片描述][SouthEast 5]

## 使用Spring MVC操作 ##

新建项目，导入对应的spring-jar包和配置文件

ajax请求DispatcherServlet  
然后通过HandlerMapping映射到对应的Controller  
调用jackson.jar包将Controller返回结果转成json输出

## 先写一个Controller类 ##

package Controller;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import entity.Note;
    @Controller
    public class LoadController { 
        @RequestMapping("notelist.do")
        @ResponseBody//将返回结果调用jackson.jar包将其转成json(但是要导入json里的包)
        public List<Note> execute(){
            //调用Dao获取笔记数据，采用json返回
        List<Note> list = new ArrayList<Note>();
    
            //将笔记信息以json格式输出
            Note note = new Note();
            note.setId("01");
            note.setName("Java");
    
            Note note1 = new Note();
            note1.setId("02");
            note1.setName("Python");
    
            Note note2 = new Note();
            note2.setId("03");
            note2.setName("SpringMVC");
            //都添加进list
            list.add(note);
            list.add(note1);
            list.add(note2);
    
            //本来没有json的话，返回值是一个字符串也就是对应的jsp的名。现在将其返回list，也就是
            //要将这个list转成json格式
            return list;
        }
    
    }

## 再进行配置 web.xml ##

<?xml version="1.0" encoding="UTF-8"?>
    <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    
    
    <servlet>
      <servlet-name>springwebmvc</servlet-name>
      <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
      
      <init-param>
        <param-name>contextConfigLocation</param-name>  
        <param-value>classpath:applicationContext.xml</param-value>  
    </init-param>
    
      </servlet>
      <servlet-mapping>
      <servlet-name>springwebmvc</servlet-name>
      <url-pattern>*.do</url-pattern>
      </servlet-mapping>
    
      <display-name></display-name> 
      <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
      </welcome-file-list>
    </web-app>

## spring配置 ##

<mvc:annotation-driven></mvc:annotation-driven>
        
        <context:component-scan base-package="Controller"></context:component-scan>

## 最后导入json包。 ##

![这里写图片描述][SouthEast 6]

## 请求，返回json数据 ##

![这里写图片描述][SouthEast 7]

将之前的页面加过来（要改请求地址）

![这里写图片描述][SouthEast 8]

[SouthEast]: /images/20220713/5805e6ad40cd45e4b8fe9d6af3794a22.png
[SouthEast 1]: /images/20220713/6e65a23be233450694fbec5acdc2fee3.png
[SouthEast 2]: /images/20220713/960329c1837c4ee3bff1148e7a3b411d.png
[http_download.csdn.net_download_lablenet_9002259]: http://download.csdn.net/download/lablenet/9002259
[SouthEast 3]: /images/20220713/2068dae934a34a92988e36d5c20c4994.png
[SouthEast 4]: /images/20220713/03e05f5dd4d4445cbd7dbd61acd35635.png
[SouthEast 5]: /images/20220713/c2f4ed33085842e0a84ad807965d2dcb.png
[SouthEast 6]: /images/20220713/21c5ce37b26a47dfb98295a3b4c241af.png
[SouthEast 7]: /images/20220713/ca03411354e5484796cd699ab2693375.png
[SouthEast 8]: /images/20220713/77e210d15ea148e38f3ad217e199e830.png