jQuery操作JSON、服务端操作JSON（Servlet、SpringMVC）_jquery命令启动json服务器-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28295425/article/details/53982240

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（选择的）

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

<script type="text/javascript">
//定义个JSON数组存省份
var v1 =[{id:"01",name:"广东"},
        {id:"02",name:"河北"},
        {id:"03",name:"山东"}
        ];


$(function(){//页面载入执行
    //解析v1的数据，生成option

    for(var i=0;i<v1.length;i++){

        var id =v1[i].id;
        var name =v1[i].name;

        //拼接一耳光option字符串
        var s_opt ='<option value='+id+'>'+name+'</option>';

        var $opt = $(s_opt);//将字符串转成jQery对象
        //将option添加到select中
        $("#s1").append($opt);
    }
});
</script>  
</head>

  <body>

省份：
    <select id="s1">
    <!-- 动态生成省份 -->

    </select>

  </body>
</html>

这里写图片描述

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

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

<script type="text/javascript">
//下拉单选项改变事件处理

$(function(){//页面加载完毕后
$("#s1").change(function(){//下拉改变
//提取选中的option信息
    var value = $("#s1 option:selected").text();//选出的是选中的option
        //将内容显示到span上
        $("#name_span").html(value);
});

});

</script>

这里写图片描述

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

即在上面的js中增加

<script type="text/javascript">
//下拉单选项改变事件处理

$(function(){//页面加载完毕后
$("#s1").change(function(){//下拉改变
//提取选中的option信息
    var value = $("#s1 option:selected").text();//选出的是选中的option
        //将内容显示到span上
        $("#name_span").html(value);

        //向ul中增加一个li
            var s_li ='<li>'+value+'</li>';
        var $li = $(s_li);
        $("#s_ul").append($li);

});

});

</script>

这里写图片描述

若想要清空 ul

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

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

服务端操作json

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

json_jar下载地址：

http://download.youkuaiyun.com/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();
    }

}

这里写图片描述

将一个list转成json

        //将list转成json字符串

        JSONArray json = JSONArray.fromObject(list);

        String json_str = json.toString();
        System.out.println(json_str);
        out.print(json_str);

这里写图片描述

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">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<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>

这里写图片描述

使用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>
<!-- <load-on-startup>1</load-on-startup>   -->
  </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配置

    <!-- 配置handlermapper -->
    <mvc:annotation-driven></mvc:annotation-driven>
    <!-- 扫描Controller -->
    <context:component-scan base-package="Controller"></context:component-scan>