您的位置：首页 > Web前端 > JQuery

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

2017-01-02 21:17 399 查看

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.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();
}

}

将一个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>

最后导入json包。

请求，返回json数据

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航