Web开发之jQuery框架的使用
Posted nuist__NJUPT
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web开发之jQuery框架的使用相关的知识，希望对你有一定的参考价值。
jQuery是一个快速、简洁的javascript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化html文档操作、事件处理、动画设计和Ajax交互。jquery它的插件机制特别丰富,在开发中可以选择非常多的相关插件，例如，表单校验插件，树型结构。
目录
我们使用jQuery框架可以更好地实现以下操作：
- html文档操作，对于dom相关操作优化
- jquery提供更加方便与丰富事件处理
- jquery提供简单动画特效
- jquery提供ajax交互
jQuery的官网如下：jQuery官网，需要相关资料可以进入下载。
1、jQuery快速入门
首先导入jQuery文件jquery-1.8.3.min.js，并在script种引入jquery-1.8.3.min.js，最后执行相应的操作即可，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function ()
alert("jQuery入门") ;
)
$(function ()
alert("这是页面加载完成执行的,jquery中可以绑定多次") ;
)
</script>
</head>
<body>
</body>
</html>注意:源生的js绑定，它只能绑定一次，而jquery允许绑定多次。
2、jQuery核心函数
通过id得到dom对象和jqury对象，以及dom对象和jquey对象的相互转换如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
//得到div的dom对象
var div = document.getElementById("d") ;
//得到div的jQuery对象
var jQueryDiv = $("#d") ;
//将dom对象转换成jQuery对象
$(div).html("jQuery对象") ;
//将jQuery对象转换成dom对象
jQueryDiv.get(0).innerHTML = "dom对象" ;
</script>
</head>
<body>
<div id ="d"></div>
</body>
</html>3、jQuery选择器
1）基本选择器
包括根据id查找元素，根据标签名称查找元素，根据class属性查找元素，匹配所有元素，以及将每一个选择器匹配到元素合并后一起返回。其中使用到了jQuery的一些方法，例如：html(),size(),index(),each(),text()等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function ()
//得到id=d1的元素中的内容显示出
var id1 = $("#d1").html() ;
var id1_1 = $("#d1").text() ;
alert(id1 + " " + id1_1) ;
//将class=d2元素中的内容后面添加欢迎你
$(".d2").each(function (i)
$(this).html($(this).html() + "欢迎你") ;
)
//得到class=d2的元素有几个
var size = $(".d2").size() ;
alert(size)
//得到id=d1这个div在整个页面上是第几个.
var x = $("div").index("#d1") ;
alert(x) ;
//将所有的class=d2或id=d1元素中的内容设置为java
$(".d2,#d1").html("java") ;
) ;
</script>
</head>
<body>
<div id ="d1">id属性</div>
<div class="d2">class属性</div>
<div class="d2">class属性...</div>
<div>div属性</div>
</body>
</html>2）层级选择器
- 空格 得到元素下的所有子元素(包含直接子元素与间接子元素)
- 大于号> 只获取直接的子元素
- 加号+ 只获取直接的一个兄弟元素
- 波浪线~ 所有的后边的兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function ()
//获取id=d的所有<a>子元素
var x = $("#d a").size() ;
alert(x) ;
//获取id=d 的直接<a>子元素
var y = $("#d>a").size() ;
alert(y) ;
//获取id=d第一个<p>兄弟元素
var z = $("#d+p").html() ;
alert(z)
//获取id=d的所有<p>兄弟元素
var u = $("#d~p").html() ;
alert(u) ;
//将id=d下的所有子元素<a>的文字颜色设置成红色
$("#d a").css("color","red") ;
) ;
</script>
</head>
<body>
<div id ="d">
<a>Java</a>
<p><a>matlab</a></p>
<a>go</a>
</div>
<p>python</p>
<p>c++</p>
</body>
</html>3）基本过滤器
过滤器它是在基本选择器与层次选择器获取到一批元素后，在进行过滤操作，使用过滤选择器基本都是”:”开头，除了属性过滤选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function ()
//设置表格第一行，显示为红色
$("tr:first").css("color","red") ;
//设置除表格第一行外，其余行为蓝色
$("tr:not(tr:first)").css("color","blue") ;
$("tr:gt(0)").css("color","blue") ;
//设置偶数行为黄色，奇数行为红色
$("tr:even").css("color","yellow") ;
$("tr:odd").css("color","red") ;
//设置页面标题颜色为灰色
$(":header").css("color","gray") ;
) ;
</script>
</head>
<body>
<h1>商品信息</h1>
<table border="1">
<tr>
<td>编号</td>
<td>名称</td>
<td>价格</td>
<td>数量</td>
</tr>
<tr>
<td>001</td>
<td>电脑</td>
<td>5500</td>
<td>1000</td>
</tr>
</table>
</body>
</html>4）内容过滤器
内容过滤选择器它是根据元素内部文本内容进行选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function ()
//设置含有java的div内容为红色
$("div:contains('java')").css("color","red") ;
//设置没有字元素的div内容为：这是空的div
$("div:empty").html("这是空的div") ;
//设置包含<a>标签的div颜色为蓝色
$("div:has('a')").css("color","blue") ;
//设置所有含有子元素span的字体为黄色
$("span:parent").css("color","yellow") ;
)
</script>
</head>
<body>
<div>java</div>
<div>ios</div>
<div></div>
<div>
<a>python</a>学习
</div>
<div>
不学习<a>php</a>
</div>
<div>
<span>android的市场越来越小了</span>
</div>
</table>
</body>
</html>5）可见性过滤选择器
可见性过滤选择器它匹配display:none或表单中input hidden这样的元素.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function ()
//获取表单中隐藏域的值
var value = $("input:hidden").val() ;
alert(value) ;
//设置表格中所有可见的行元素北京为蓝色
$("tr:visible").css("background-color","blue") ;
//获取表格中隐藏行的文本值
alert($("tr:hidden").text()) ;
//将因此tr显示
$("tr:hidden").show() ;
//将显示的tr隐藏
$("tr:visible").hide() ;
)
</script>
</head>
<body>
<form>
<input type="text" name="email" /><br/>
<input type="hidden" name="id"value="10"/>
</form>
<table>
<tr style="display: none">
<td>value1</td>
</tr>
<tr>
<td>value2</td>
</tr>
<tr>
<td>value3</td>
</tr>
</table>
</body>
</html>6）属性过滤选择器
该过滤器主要根据根据元素的属性来过滤，attr()设置或返回被选元素的属性值。具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function ()
//设置所有id属性的div，字体是红色
$("div[id]").css("color","red") ;
//获取name=username的value值
alert($("[name='username']").val()) ;
//设置所有的多选框被选中
//$("input[type='checkbox']").attr('checked',true) ;
//设置class属性中含有class的被选中
$("input[type='checkbox'][class*='class']").attr('checked',true) ;
//获取class等于class2的多选框的name属性值
alert($("input[type='checkbox'][class='class2']").attr("name")) ;
)
</script>
</head>
<body>
<div id = "d">这是一个div</div>
<form>
<input type="text" name="username" value="tom" /><br/>
<input type="checkbox" class="class1" name="food" value="米饭"/>米饭
<input type="checkbox" class="class2" name="milk" value="牛奶"/>牛奶
<input type="checkbox" class="class3" name="vegetables" value="蔬菜"/>蔬菜
</form>
<span id = "s">这是一个span</span>
</body>
</html>7）子元素过滤选择器
根据子元素顺序来获取。nth-child根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置，也可以通过倍数来设置，first-child 获取第一个，last-child 获取最后一个，only-child 获取只有一个子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function ()
//设置列表中第2个li字号为30
$("ul li:nth-child(2)").css("font-size",30) ;
//设置列表第一行字体的颜色为红色
$("ul li:first-child").css("color","red") ;
//设置列表最后一行字体颜色为蓝色
$("ul li:last-child").css("color","blue") ;
//获取ul下只有一个li的信息
alert($("ul li:only-child").html()) ;
)
</script>
</head>
<body>
<ul>
<li>java</li>
<li>python</li>
<li>c</li>
<li>matlab</li>
</ul>
<ul>
<li>张无忌</li>
<li>赵敏</li>
<li>周芷若</li>
<li>张三丰</li>
</ul>
<ul>
<li>武松</li>
</ul>
</body>
</html>8）表单过滤选择器
表单过滤选择器是用于选取表单中的元素，trim()它是去掉字符串左右空格，
常用事件处理，失去焦点事件 blur(function())，click(function()) 点击事件，submit() 表单提交。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function () //页面加载完成后执行
//当username和password失去焦点后判断录入不能为空
$(":text,:password").blur(function ()
//获取数据
var value = $(this).val();
if(value.trim() == "")
alert($(this).attr("name") + "不能为空") ;
) ;
//对按钮添加点击事件
$(":button").click(function ()
$("form").submit() ;
)
)
</script>
</head>
<body>
<form>
用户名:<input type="text" name="username"><br/>
密码:<input type="password" name="password"><br/>
<input type="button" value="按钮">
</form>
</body>
</html>9）表单对象属性过滤选择器
checked它是用于radio,checkbox 判断选中，selected它是用于select下拉框选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function () //页面加载完成后执行
//点击按钮，打印radio，checkbox，select中选中的值
$(":button").click(function ()
alert($(":radio:checked").val()) ;
$(":checkbox:checked").each(function ()
alert($(this).val())
) ;
alert($("select option:selected").val()) ;
) ;
)
</script>
</head>
<body>
<form>
性别:<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女<br/>
爱好:<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="volleyball">网球<br/>
城市:<select>
<option value="">请选择...</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="nanjing">南京</option><br/>
</select>
<input type="button" value="提交" >
</form>
</body>
</html>4、jQuery的DOM操作
1）插入操作
主要分为内部插入和外部插入两种，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function () //页面加载完成后执行
//内部插入
//在select开始选项前添加一项
// $("#city").prepend("<option value='shenzhen'>深圳</option>") ;
//在select选项最后一项添加一个
//$("#city").append("<option value='guangzhou'>广州</option>") ;
//外部插入
$("#city option:first").before($("<option value='shenzhen'>深圳</option>")) ;
//$("#city option:last").after($("<option value='guangzhou'>广州</option>")) ;
$("<option value='guangzhou'>广州</option>").insertAfter($("#city option:last")) ;
)
</script>
</head>
<body>
<form>
城市:<select id = "city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="nanjing">南京</option><br/>
</select>
<input type="button" value="提交" >
</form>
</body>
</html>2）删除操作
remove和detach都是删除元素,remove连注册事件也删除,detach是不删除注册事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function () //页面加载完成后执行
//$("#d1").empty() ; //将元素的所有子元素删除
//给p注册事件
$("#d1 p").click(function ()
alert("ppppppppp") ;
) ;
//remove和detach都是删除元素,remove连注册事件也删除,detach是不删除注册事件
$("#d1 p").remove() ;
$("#d1 p").detach() ;
//在d2中的div追加标签p
$("#d2").append(p) ;
)
</script>
</head>
<body>
<div id="d1">
<p>pppppp</p>
<span>sssss</span>
<div id="d2"></div>
</div>
</body>
</html>3）综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function () //页面加载完成后执行
$(":button").click(function ()
//创建一个tr
var tr = $("<tr></tr>") ;
//创建四个td,并向其中添加内容
var td1 = $("<td></td>") ;
td1.append($("#username").val()) ;
var td2 = $("<td></td>") ;
td2.append($("#phone").val());
var td3 = $("<td></td>") ;
td3.append($("#email").val()) ;
var td4 = $("<td></td>") ;
//创建一个链接
var a = $("<a href ='javascript:void(0)'>删除</a>") ;
td4.append(a) ;
//完成删除功能
a.click(function ()
$(this).parents("tr").remove() ;
)
//td放到tr中
tr.append(td1).append(td2).append(td3).append(td4) ;
//tr放到table中
$("#tab").append(tr) ;
) ;
)
</script>
</head>
<body>
<div align="center">
<table id="tab" border="1">
<tr>
<td>姓名</td>
<td>电话</td>
<td>邮箱</td>
<td>删除</td>
</tr>
</table>
<hr>
姓名:<input type="text" id="username"/>
电话:<input type="text" id="phone"/>
邮箱:<input type="text" id="email"/>
<input type="button" value="添加"/>
</div>
</body>
</html>5、jQuery事件处理
1）jQuery事件
Jquery中的事件与传统的javascript中事件区别:Jquery中事件允许绑定多个函数，而javascript中一个事件只能绑定一个函数.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
//传统的js方式只能绑定单个事件
window.onload = function()
document.getElementById("btn3").onclick = function ()
alert("btn3") ;
;
;
$(function () //页面加载完成后执行
//jQuery可以同时绑定多个事件
$("#btn1").click(function ()
alert("btn1") ;
) ;
$("#btn2").click(function ()
alert("btn2") ;
) ;
)
</script>
</head>
<body>
<input type="button" id="btn1" value="添加"/>
<input type="button" id="btn2" value="删除"/>
<input type="button" id="btn3" value="重置"/>
</body>
</html>2)传统的JS事件绑定与jQuery事件绑定
bind只能 为存在的元素进行事件绑定，而live可以为没有存在，后续通过代码新添加的元素进行事件绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
//传统的js方式只能绑定单个事件
window.onload = function()
document.getElementById("btn3").onclick = function ()
alert("btn3") ;
;
;
$(function () //页面加载完成后执行
//jQuery的简化的绑定事件方法
$("#btn1").click(function ()
alert("btn1") ;
) ;
//bind用于绑定事件
$("#btn2").bind("click",function()
alert("btn2") ;
) ;
//unbind用于解绑
$("#btn2").unbind("click") ;
//使用live进行事件绑定
$("#btn2").live("click",function ()
alert("btn2") ;
) ;
//使用die进行解绑
$("#btn2").die("click") ;
)
</script>
</head>
<body>
<input type="button" id="btn1" value="添加"/>
<input type="button" id="btn2" value="删除"/>
<input type="button" id="btn3" value="重置"/>
<input type="button" id="btn4" value="选择" onclick="fun1()">
<script>
function fun1()
alert("btn4") ;
</script>
</body>
</html>3）一次性事件和自动触发
one()是一次性触发，trigger()在每一个匹配的元素上触发某类事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function () //页面加载完成后执行
//一次性事件
$("#btn1").one("click",function ()
alert("btn1") ;
) ;
//给按钮注册一个mouseover事件
$("#btn1").bind("mouseover",function ()
$(this).trigger("click") ;
) ;
)
</script>
</head>
<body>
<input type="button" id="btn1" value="添加"/>
<input type="button" id="btn2" value="删除"/>
<input type="button" id="btn3" value="重置"/>
<input type="button" id="btn4" value="选择" onclick="fun1()">
<script>
function fun1()
alert("btn4") ;
</script>
</body>
</html>4）事件切换
hover这个操作它可以绑定两个函数，当触发mouseover时第一个函数执行，当触发mouseout时第二个函数执行。toggle用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function () //页面加载完成后执行
//先设置div隐藏
$("div").hide() ;
//给h1添加hover操作
$("h1").hover(function ()
//鼠标移入显示
$("div").fadeIn(2000) ;
,function ()
//鼠标移出隐藏
$("div").fadeOut(2000) ;
) ;
)
</script>
</head>
<body>
<h1>这是测试</h1>
<div>这是一个div</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="WEB-INF/lib/jquery-1.8.3.min.js"></script>
<script>
$(function () //页面加载完成后执行
//通过点击轮流显示三张照片
$("img").toggle(function ()
$(this).attr("src","2.png") ;
,function ()
$(this).attr("src","3.png") ;
,function ()
$(this).attr("src","1.png") ;
) ;
)
</script>
</head>
<body>
<img src="1.png" width="131" height="40">
</body>
</html>6、jQuery的ajax开发
ajax是异步js和xml，一种创建交互式网页应用的网页开发技术，可以实现网页异步数据的更新，即不重新加载整个网页的情况下，对网页部分内容进行更新。
1.$.ajax()它是jquery提供的最基本的ajax编程方式。它的功能比较强大，但是使用比较麻烦，一般不使用，它是将远程数据加载到XMLHttpRequest对象中。
2.load get post 它们简化了$.ajax操作，get post针对get与post请求的，它们是开发中使用的比较多。
3.getScript getJSON 它们是用于解决ajax跨域问题的。
1)$.ajax介绍
使用$.ajax完成向服务器发送请求，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script>
$(function () //页面加载完成后执行
$("#username").blur(function ()
//向服务器发送请求
var usernameValue = $("#username").val() ;
var url = "/servlet_war_exploded/LoadServlet" ;
//使用$.ajax完成操作
$.ajax(
url:url,
data:'username':usernameValue,
type:"post",
dataType:"html",
success:function (data) //参数data接收了服务器响应的数据
$("#username_span").html(data) ;
) ;
);
)
</script>
</head>
<body>
<input type="text" name="username" id="username"> <span id = "username_span"></span><br/>
<input type="password" name = "password"><br/>
</body>
</html>2）$.get与$.post介绍
$.get与$.post它们针对于get与post请求，向服务器发送请求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery案例</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script>
$(function () //页面加载完成后执行
$("#username").blur(function ()
//向服务器发送请求
var usernameValue = $("#username").val() ;
var url = "/servlet_war_exploded/LoadServlet" ;
//使用$.get完成操作
$.get(url,"username":usernameValue,function (data)
$("#username_span").html(data) ;
,"html") ;
//使用$.post完成操作只需要把get换成post
);
)
</script>
</head>
<body>
<input type="text" name="username" id="username"> <span id = "username_span"></span><br/>
<input type="password" name = "password"><br/>
</body>
</html>7、jQuery的ajax开发基于json
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，json简单说就是javascript中的对象和数组.Fastjson是阿里提供的一个开源json插件，它可以将java的对象转换成json数据,也可以将一个json转换成java对象(不常用).
Fastjson使用介绍
- 导入相应的jar包
- fastjson将java对象转换成json数据，String json=JSONObject.toJsonString(java对象);
1）将java对象和list集合转换为json
首先创建一个java的实体类。
public class Project
private int id ;
private String name ;
private int count ;
private double price ;
public int getId()
return id;
public void setId(int id)
this.id = id;
public String getName()
return name;
public void setName(String name)
this.name = name;
public int getCount()
return count;
public void setCount(int count)
this.count = count;
public double getPrice()
return price;
public void setPrice(double price)
this.price = price;
写一个测试类，使用Fastjson将java对象和list集合转换为json，如下：
import com.alibaba.fastjson.JSONObject;
import java.util.ArrayList;
import java.util.List;
public class JsonTest
public static void main(String[] args)
test() ;
test1() ;
private static void test1()
//将一个list集合转换成json
List<Project> list = new ArrayList<Project>() ;
Project project1 = new Project() ;
project1.setId(1);
project1.setCount(100);
project1.setName("电视机") ;
project1.setPrice(2000.00);
Project project2 = new Project() ;
project2.setId(2);
project2.setCount(200);
project2.setName("洗衣机机") ;
project2.setPrice(3000.00);
list.add(project1) ;
list.add(project2) ;
String json = JSONObject.toJSONString(list) ;
System.out.println(json);
private static void test()
Project project = new Project() ;
project.setId(1);
project.setCount(100);
project.setName("电视机") ;
project.setPrice(2000.00);
//将一个java对象转换成json
String json = JSONObject.toJSONString(project) ;
System.out.println(json);
2）案例1-显示商品信息
- 创建一个html页面，页面上有一个”显示商品”连接
- 当我们点击页面上的连接时，向服务器发送ajax请求，获取商品信息.
- 服务器得到商品信息List<Product>,将集合信息转换成json响应到浏览器端。
- 在页面上来处理服务器响应回来的数据。
页面处理ajax向服务器发送的请求，以及将json数据封装成表格响应到浏览器如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示商品信息</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function ()
$("#a").toggle(function ()
//向服务器发送请求得到商品信息并显示
var url = "/servlet_war_exploded/ProductServlet" ;
$.post(url,function (data)
var ObjectJson = eval(data) ;
//处理响应的json数据，封装成table的html代码
var tab = $("<table border='1'><tr><td>编号</td><td>名称</td><td>数量</td><td>价格</td></tr></table>") ;
for(var i=0; i<ObjectJson.length; i++)
var tr = $("<tr><td>"+ObjectJson[i].id+"</td><td>"+ObjectJson[i].name+"</td><td>"+ObjectJson[i].count+"</td><td>"+ObjectJson[i].price+"</td></tr>") ;
tab.append(tr) ;
$("#content").append(tab) ;
$("#content").show() ;
,"json") ;
,function ()
//将商品信息进行隐藏
$("#content").hide() ;
//清空div
$("#content").html("") ;
)
)
</script>
</head>
<body>
<a href="javascript:void(0)" id="a">显示商品信息</a>
<hr>
<div id="content">
</div>
</body>
</html>定义的一个实体Product类，用于封装数据：
public class Product
private int id ;
private String name ;
private int count ;
private double price ;
public int getId()
return id;
public void setId(int id)
this.id = id;
public String getName()
return name;
public void setName(String name)
this.name = name;
public int getCount()
return count;
public void setCount(int count)
this.count = count;
public double getPrice()
return price;
public void setPrice(double price)
this.price = price;
处理页面请求并相应json数据的servlet，如下：
import com.alibaba.fastjson.JSONObject;
import com.domain.Product;
import com.domain.Project;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
public class ProductServlet extends HttpServlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
doGet(request,response);
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
List<Product> list = new ArrayList<Product>() ;
Product p1 = new Product() ;
p1.setId(1);
p1.setCount(100);
p1.setName("电视机") ;
p1.setPrice(2000.00);
Product p2 = new Product() ;
p2.setId(2);
p2.setCount(200);
p2.setName("洗衣机机") ;
p2.setPrice(3000.00);
list.add(p1) ;
list.add(p2) ;
//将数据转换成json响应到浏览器
String json = JSONObject.toJSONString(list) ;
response.getWriter().write(json);
最后需要在web.xml中配置用到的servlet，如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>ProductServlet</servlet-name>
<servlet-class>com.controller.ProductServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ProductServlet</servlet-name>
<url-pattern>/ProductServlet</url-pattern>
</servlet-mapping>
</web-app>3）案例2-省二级联动
- 会向服务器发送两次请求，第一次是页面加载完成后，获取省份信息，选择省份后，向服务器发送请求来获取相关的城市信息。
- 省份与城市信息，Province对应省份信息类，City对应城市信息类，我们自定义相关的信息Map<Province,List<City>>用来存储省份与城市信息。
1.完成服务器端操作
a.创建Province与City类
b.创建Map集合来封装数据
c.创建一个Servlet来处理浏览器端的请求。
2.关于浏览器端操作
a.页面加载完成后，要向服务器发送请求，来获取省份信息，添加到省份下拉框中。
b.当选择某一个省份后,chang事件触发，根据选择的省份，向服务器发送请求来获取对应的城市信息添加到城市的下拉框中。
服务器端的实体类City代码如下：
public class City
private int id ;
private String name ;
public int getId()
return id;
public void setId(int id)
this.id = id;
public String getName()
return name;
public void setName(String name)
this.name = name;
服务器端实体类Province代码：
public class Province
private int id ;
private String name ;
public int getId()
return id;
public void setId(int id)
this.id = id;
public String getName()
return name;
public void setName(String name)
this.name = name;
服务器端的servlet代码，用于封装数据和响应请求，如下：
import com.alibaba.fastjson.JSONObject;
import com.domain.City;
import com.domain.Product;
import com.domain.Province;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.*;
@WebServlet(name = "CityServlet")
public class CityServlet extends HttpServlet
Map<Province, List<City>> map = new HashMap<>() ;
@Override
public void init() throws ServletException
//创建省份
Province p1 = new Province() ;
p1.setId(1);
p1.setName("黑龙江");
City c11 = new City() ;
c11.setId(1);
c11.setName("哈尔滨");
City c12 = new City() ;
c12.setId(2);
c12.setName("大庆");
List<City> l1 = new ArrayList<City>() ;
l1.add(c11) ;
l1.add(c12) ;
map.put(p1,l1) ;
Province p2 = new Province() ;
p2.setId(2);
p2.setName("吉林");
City c21 = new City() ;
c21.setId(1);
c21.setName("长春");
City c22 = new City() ;
c22.setId(2);
c22.setName("四平");
List<City> l2 = new ArrayList<City>() ;
l2.add(c21) ;
l2.add(c22) ;
map.put(p2,l2) ;
Province p3 = new Province() ;
p3.setId(3);
p3.setName("辽宁");
City c31 = new City() ;
c31.setId(1);
c31.setName("沈阳");
City c32 = new City() ;
c32.setId(2);
c32.setName("大连");
List<City> l3 = new ArrayList<City>() ;
l3.add(c31) ;
l3.add(c32) ;
map.put(p3,l3) ;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
doGet(request,response);
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
String method = request.getParameter("method") ;
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
if(method.equals("pro"))
//获取所有的省份信息,将省份信息封装到集合,转换成json数据,响应到浏览器
Set<Province> set = map.keySet() ;
String json = JSONObject.toJSONString(set) ;
response.getWriter().write(json);
if(method.equals("city"))
//获取省份名称
String pname = request.getParameter("pname") ;
//遍历省份，根据省份获取对应的城市集合
for(Province p : map.keySet())
if(pname.equals(p.getName()))
List<City> city1 = map.get(p);
//转换成json数据响应到浏览器
String json1 = JSONObject.toJSONString(city1) ;
response.getWriter().write(json1);
break ;
浏览器端发送请求，并根据响应显示的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市二级联动</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function ()
//当页面加载完成,向服务器发送请求并获得省份信息
var url = "/servlet_war_exploded/city" ;
$.post(url+"?method=pro",function (data)
var objJson = eval(data) ;
for(var i=0; i<objJson.length; i++)
//省份名称
var name = objJson[i].name ;
//生成省份的option添加到省份下拉列表
$("#province").append("<option>"+name+"</option>") ;
,"json");
//当选择了省份,获取省份对应的城市信息
$("#province").change(function ()
//先清理之前的
$("#city").html("<option>---选择城市---</option>") ;
//获取省份对应的城市信息并显示在浏览器
var pname = $(this).val() ;
$.post(url+"?method=city","pname":pname,function (data)
var jsons = eval(data) ;
//alert(jsons.length) ;
// for(var i=0; i<jsons.length; i++)
// $("#city").append("<option>"+jsons[i].name+"</option>") ;
//
$(jsons).each(function ()
var name = this.name ;
$("#city").append("<option>"+name+"</option>") ;
) ;
,"json") ;
);
);
</script>
</head>
<body>
<select id="province">
<option>---请选择省份---</option>
</select>
<select id="city">
<option>---请选择城市---</option>
</select>
</body>
</html>配置servlet的xml代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>CityServlet</servlet-name>
<servlet-class>com.controller.CityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CityServlet</servlet-name>
<url-pattern>/city</url-pattern>
</servlet-mapping>
</web-app>8、Ajax跨域问题
跨域它是不同的域名(服务器)之间的相互的资源的访问。当协议，域名，端口号任意一个不相同，它们就是不同的域。正常情况下，因为浏览器安全问题，不同域的资源是不可以访问的。
什么情况下会使用到跨域？
一般情况是在自己的内部的工程中会出现跨域情况。
有三种解决方案:
1.代理方案 前端页面访问本地的服务器，本地服务器访问其它域的资源，它是服务器端的跨域问题解决。
2.jsonp JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
3.XHR2全称XMLHttpRequest Level2它是HTML5提供的方法，一般是在移动开发中使用。
以上是关于Web开发之jQuery框架的使用的主要内容，如果未能解决你的问题，请参考以下文章
（转）基于MVC4+EasyUI的Web开发框架经验总结--实现省份城市行政区三者联动
03 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之web层
一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面