- 原生js的缺点
- 不能添加多个入口函数（window.onload），如果添加了多个的话，后面的会把前面的给覆盖
- 原生的js的api名字太长不好记
- 原生的js有时候代码冗余
- 原生js中有些属性或者方法有兼容问题
- 原生js容错率比较低，前面的代码出了问题，后面的代码页运行不了
- jquery的概念
jquery 是一个优秀的Javascript库
jquery的理念：写的少，做的多
jquery的入门
- jquery的引入
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
在jQuery库中，$就是jQuery的一个简写形式，
- jquery的第一个程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速入门</title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function () {//等待Dom元素加载完毕
alert("helloWord!")//弹出一个框
})
</script>
</body>
</html>
- js入口函数和jQuery的入口函数的区别(window.onload 和 $(document).ready()）
window.onload
- 必须等待网页中的所有内容加载完毕之后才能执行
- 不能同时编写多个
- 没有简化的编写
$(document).ready()
- 网页中所有的dom结构绘制完毕后就执行，可能dom元素关联的东西并没有加载完毕
- 能同时编写多个
- 可以简化书写（简化书写如下）
<!--jquery的简述书写的入口函数-->
$(function () {
alert("我时入口函数的简化形式")
})
- jquery对象和dom对象
dom对象
DOM:文档对象模型，每一个dom都可以表示成一棵树。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM案例</title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
</head>
<body>
<h3>例子</h3>
<p title="选择你最喜欢的水果">你最喜欢的水果时？</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
<script>
</script>
</body>
</html>
- 把网页元素表示为一颗dom树
在这颗树中，h3,p,ul以及ul的三个li子节点都是dom元素节点，可以通过JavaScript的
document.getElementsByClassName或者document.getElementById("#li")来获取元素的节点，像
这样获取dom元素就是dom对象。
- dom对象可以使用Javascript中的方法
var ele = document.getElementsByClassName("li");
ele.innerHTML;
jquery对象
jQuery对象就是通过jQuery包装dom对象后产生的对象
在jQuery对象中无法使用dom对象的任何方法
jQuery对象和dom对象之间的转换
- jquery对象转换为dom对象举例子
var $h3 = $("h3");//jquery对象
var $h3Element = $h3[0];//dom对象
var newVar = $h3.get(0);//dom对象
- dom对象转换为jQuery对象
var ele = document.getElementsByClassName("li");
var $1 = $(ele);//juery对象
$1.html()//jquery中的方法
jquery的选择器
jquery选择器完全继承了css的风格，例用jQuery选择器，可以非常便捷和快速的找出特定的dom元素，然后为他们添加相应的行为，而无需担心浏览器是否支持这一选择器
- 基本选择器
- 标签选择器（元素选择器）
* 语法： $(“html标签名”) 获得所有匹配标签名称的元素- id选择器
* 语法： $("#id的属性值") 获得与指定id属性值匹配的元素- 类选择器
* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素- 并集选择器：
* 语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素
- 案例-代码实现
<script type="text/javascript">
$(function () {
// <input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
$("#b1").click(function () {
$("#one").css("backgroundColor","red");
})
// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
$("#b2").click(function () {
$("div").css("backgroundColor","red");
})
// <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
$("#b3").click(function () {
$(".mini").css("backgroundColor","red");
})
// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
$("#b4").click(function () {
$("span,#two").css("backgroundColor","red");
})
});
</script>
- 层级选择器
- 后代选择器
* 语法： $("A B ") 选择A元素内部的所有B元素- 子选择器
* 语法： $(“A > B”) 选择A元素内部的所有B子元素
- 代码实现部分
<script type="text/javascript">
$(function () {
// <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
$("#b1").click(function () {
$("body div").css("backgroundColor","pink");
});
// <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
$("#b2").click(function () {
$("body > div").css("backgroundColor","pink");
});
});
</script>
- 属性选择器
- 属性名称选择器
* 语法： $(“A[属性名]”) 包含指定属性的选择器- 属性选择器
- 复合属性选择器
* 语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
- 代码实现部分
<script type="text/javascript">
$(function () {
// <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
$("#b1").click(function () {
$("div[title]").css("backgroundColor","pink");
});
// <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
$("#b2").click(function () {
$("div[title='test']").css("backgroundColor","pink");
});
// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
$("#b3").click(function () {
$("div[title!='test']").css("backgroundColor","pink");
});
// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
$("#b4").click(function () {
$("div[title^='te']").css("backgroundColor","pink");
});
// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
$("#b5").click(function () {
$("div[title$='est']").css("backgroundColor","pink");
});
// <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
$("#b6").click(function () {
$("div[title*='es']").css("backgroundColor","pink");
});
// <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
$("#b7").click(function () {
$("div[id][title*='es']").css("backgroundColor","pink");
});
});
</script>
-
过滤选择器
1. 首元素选择器 * 语法： :first 获得选择的元素中的第一个元素 2. 尾元素选择器 * 语法： :last 获得选择的元素中的最后一个元素 3. 非元素选择器 * 语法： :not(selector) 不包括指定内容的元素 4. 偶数选择器 * 语法： :even 偶数，从 0 开始计数 5. 奇数选择器 * 语法： :odd 奇数，从 0 开始计数 6. 等于索引选择器 * 语法： :eq(index) 指定索引元素 7. 大于索引选择器 * 语法： :gt(index) 大于指定索引元素 8. 小于索引选择器 * 语法： :lt(index) 小于指定索引元素 9. 标题选择器 * 语法： :header 获得标题（h1~h6）元素，固定写法 -
代码实现部分
<script type="text/javascript">
$(function () {
// <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
$("#b1").click(function () {
$("div:first").css("backgroundColor","pink");
});
// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
$("#b2").click(function () {
$("div:last").css("backgroundColor","pink");
});
// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
$("#b3").click(function () {
$("div:not(.one)").css("backgroundColor","pink");
});
// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
$("#b4").click(function () {
$("div:even").css("backgroundColor","pink");
});
// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
$("#b5").click(function () {
$("div:odd").css("backgroundColor","pink");
});
// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
$("#b6").click(function () {
$("div:gt(3)").css("backgroundColor","pink");
});
// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
$("#b7").click(function () {
$("div:eq(3)").css("backgroundColor","pink");
});
// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
$("#b8").click(function () {
$("div:lt(3)").css("backgroundColor","pink");
});
// <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
$("#b9").click(function () {
$(":header").css("backgroundColor","pink");
});
});
</script>
-
表单过滤选择器
1. 可用元素选择器 * 语法： :enabled 获得可用元素 2. 不可用元素选择器 * 语法： :disabled 获得不可用元素 3. 选中选择器 * 语法： :checked 获得单选/复选框选中的元素 4. 选中选择器 * 语法： :selected 获得下拉框选中的元素 -
代码实现部分
<script type="text/javascript">
$(function () {
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
$("#b1").click(function () {
$("input[type='text']:enabled").val("aaa");
});
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function () {
$("input[type='text']:disabled").val("aaa");
});
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
$("#b3").click(function () {
alert($("input[type='checkbox']:checked").length);
});
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
$("#b4").click(function () {
alert($("#job > option:selected").length);
});
});
</script>
-
DOM操作
-
内容操作
1. html(): 获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font> 2. text(): 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容 3. val()： 获取/设置元素的value属性值 -
代码实现部分
<script>
$(function () {
//获取myinput 的value值
var value = $("#myinput").val();
alert(value);
$("#myinput").val("李四");
//获取mydiv的标签体内容
var html = $("#mydiv").html();
alert(html);
$("#mydiv").html("<p>aaaa</p>");
//获取mydiv文本内容
var text = $("#mydiv").text();
alert(text);
$("#mydiv").text("bbb");
});
</script>
-
属性操作
1. 通用属性操作
1. attr(): 获取/设置元素的属性
2. removeAttr():删除属性
3. prop():获取/设置元素的属性
4. removeProp():删除属性* attr和prop区别？ 1. 如果操作的是元素的固有属性，则建议使用prop 2. 如果操作的是元素自定义的属性，则建议使用attr 2. 对class属性操作 1. addClass():添加class属性值 2. removeClass():删除class属性值 3. toggleClass():切换class属性 * toggleClass("one"): * 判断如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加 4. css(): -
代码实现部分
<script type="text/javascript">
$(function () {
//获取北京节点的name属性值
var name = $("#bj").attr("name");
//alert(name);
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");
//新增北京节点的discription属性 属性值是didu
$("#bj").attr("discription","didu");
//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");
//获得hobby的的选中状态
var checked = $("#hobby").prop("checked");
alert(checked);
//var checked = $("#hobby").attr("checked"); //获取不到，弹出undefined
});
</script>
-
CRUD操作:
1. append():父元素将子元素追加到末尾 * 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾 2. prepend():父元素将子元素追加到开头 * 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头 3. appendTo(): * 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾 4. prependTo()： * 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头 5. after():添加元素到元素后边 * 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系 6. before():添加元素到元素前边 * 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系 7. insertAfter() * 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系 8. insertBefore() * 对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系 9. remove():移除元素 * 对象.remove():将对象删除掉 10. empty():清空元素的所有后代元素。 * 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点 -
代码实现
<script type="text/javascript">
$(function () {
// <input type="button" value="将反恐放置到city的后面" id="b1"/>
$("#b1").click(function () {
//append
//$("#city").append($("#fk"));
//appendTo
$("#fk").appendTo($("#city"));
});
// <input type="button" value="将反恐放置到city的最前面" id="b2"/>
$("#b2").click(function () {
//prepend
//$("#city").prepend($("#fk"));
//prependTo
$("#fk").prependTo($("#city"));
});
// <input type="button" value="将反恐插入到天津后面" id="b3"/>
$("#b3").click(function () {
//after
//$("#tj").after($("#fk"));
//insertAfter
$("#fk").insertAfter($("#tj"));
});
// <input type="button" value="将反恐插入到天津前面" id="b4"/>
$("#b4").click(function () {
//before
//$("#tj").before($("#fk"));
//insertBefore
$("#fk").insertBefore($("#tj"));
});
});
$(function () {
// <input type="button" value="删除<li id='bj' name='beijing'>北京</li>" id="b1"/>
$("#b1").click(function () {
$("#bj").remove();
});
// <input type="button" value="删除city所有的li节点 清空元素中的所有后代节点(不包含属性节点)" id="b2"/>
$("#b2").click(function () {
$("#city").empty();
});
});
</script>
-
事件绑定
1. jquery标准的绑定方式 * jq对象.事件方法(回调函数)； * 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。 * 表单对象.submit();//让表单提交 2. on绑定事件/off解除绑定 * jq对象.on("事件名称",回调函数) * jq对象.off("事件名称") * 如果off方法不传递任何参数，则将组件上的所有事件全部解绑 3. 事件切换：toggle * jq对象.toggle(fn1,fn2...) * 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2..... * 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。 <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script> -
绑定事件的代码实现
<script type="text/javascript">
$(function () {
//1.获取name对象，绑定click事件
$("#name").click(function () {
alert("我被点击了...")
});
//给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件
$("#name").mouseover(function () {
alert("鼠标来了...")
});
$("#name").mouseout(function () {
alert("鼠标走了...")
});
//简化操作，链式编程
$("#name").mouseover(function () {
alert("鼠标来了...")
}).mouseout(function () {
alert("鼠标走了...")
});
alert("我要获得焦点了...")
$("#name").focus();//让文本输入框获得焦点
表单对象.submit();//让表单提交
});
</script>
- on/off的代码实现
<script type="text/javascript">
$(function () {
//1.使用on给按钮绑定单击事件 click
$("#btn").on("click",function () {
alert("我被点击了。。。")
}) ;
//2. 使用off解除btn按钮的单击事件
$("#btn2").click(function () {
//解除btn按钮的单击事件
//$("#btn").off("click");
$("#btn").off();//将组件上的所有事件全部解绑
});
});
</script>
- 事件切换的代码实现部分
<script type="text/javascript">
$(function () {
//获取按钮，调用toggle方法
$("#btn").toggle(function () {
//改变div背景色backgroundColor 颜色为 green
$("#myDiv").css("backgroundColor","green");
},function () {
//改变div背景色backgroundColor 颜色为 pink
$("#myDiv").css("backgroundColor","pink");
});
});
</script>
-
动画实现
1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数： 1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) 2. easing：用来指定切换效果，默认是"swing"，可用参数"linear" * swing：动画执行时效果是 先慢，中间快，最后又慢 * linear：动画执行时速度是匀速的 3. fn：在动画完成时执行的函数，每个元素执行一次。 2. hide([speed,[easing],[fn]]) 3. toggle([speed],[easing],[fn]) 2. 滑动显示和隐藏方式 1. slideDown([speed],[easing],[fn]) 2. slideUp([speed,[easing],[fn]]) 3. slideToggle([speed],[easing],[fn]) 3. 淡入淡出显示和隐藏方式 1. fadeIn([speed],[easing],[fn]) 2. fadeOut([speed],[easing],[fn]) 3. fadeToggle([speed,[easing],[fn]]) -
jquery的遍历
1. js的遍历方式 * for(初始化值;循环结束条件;步长) 2. jq的遍历方式 1. jq对象.each(callback) 1. 语法： jquery对象.each(function(index,element){}); * index:就是元素在集合中的索引 * element：就是集合中的每一个元素对象 * this：集合中的每一个元素对象 2. 回调函数返回值： * true:如果当前function返回为false，则结束循环(break)。 * false:如果当前function返回为true，则结束本次循环，继续下次循环(continue) 2. $.each(object, [callback]) 3. for..of: jquery 3.0 版本之后提供的方式 for(元素对象 of 容器对象) -
jquery遍历的代码实现
<script type="text/javascript">
$(function () {
//1.获取所有的ul下的li
var citys = $("#city li");
//2.遍历li
for (var i = 0; i < citys.length; i++) {
if("上海" == citys[i].innerHTML){
//break; 结束循环
//continue; //结束本次循环，继续下次循环
}
//获取内容
alert(i+":"+citys[i].innerHTML);
}
//2. jq对象.each(callback)
citys.each(function (index,element) {
//3.1 获取li对象 第一种方式 this
alert(this.innerHTML);//this是js对象
alert($(this).html());
//3.2 获
// 取li对象 第二种方式 在回调函数中定义参数 index（索引） element（元素对象）
alert(index+":"+element.innerHTML);
alert(index+":"+$(element).html());
//判断如果是上海，则结束循环
if("上海" == $(element).html()){
//如果当前function返回为false，则结束循环(break)。
//如果返回为true，则结束本次循环，继续下次循环(continue)
return true;
}
alert(index+":"+$(element).html());
});
//3 $.each(object, [callback])
$.each(citys,function () {
alert($(this).html());
});
//4. for ... of:jquery 3.0 版本之后提供的方式
for(li of citys){
alert($(li).html());
}
});
</script>
- jquery与ajax的应用
- ajax 的优势
不需要插件支持
优秀的用户体验：在不用加载整个页面的情况下，也可以对页面进行更新
提高web程序的性能
减轻服务器和宽带的负担
ajax的核心是xmlHttpRequest对象
ajax-- 概念：异步的Javascript和xml
他是Ajax实现的关键–发送异步请求、接受相应、执行回调都是通过他来完成的。
- 同步请求和异步请求
- ajax实现原生js
- 代码部分
<script>
//定义方法
function fun() {
//发送异步请求
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 建立连接
/*
参数：
1. 请求方式：GET、POST
* get方式，请求参数在URL后边拼接。send方法为空参
* post方式，请求参数在send方法中定义
2. 请求的URL：
3. 同步或异步请求：true（异步）或 false（同步）
*/
xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3.发送请求
xmlhttp.send();
//4.接受并处理来自服务器的响应结果
//获取方式 ：xmlhttp.responseText
//什么时候获取？当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
- jquery实现方式一：1. $.ajax()
<script>
//定义方法
function fun() {
//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式
//data: "username=jack&age=23",//请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误，会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
}
</script>
-
jquery实现方式二：$.get()：发送get请求
-
语法
语法：$.get(url, [data], [callback], [type]) * 参数： * url：请求路径 * data：请求参数 * callback：回调函数 * type：响应结果的类型
<script>
//定义方法
function fun() {
$.get("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"text");
}
</script>
-
jquery实现方式三：$.post()：发送post请求
语法* 语法：$.post(url, [data], [callback], [type]) * 参数： * url：请求路径 * data：请求参数 * callback：回调函数 * type：响应结果的类型
<script>
//定义方法
function fun() {
$.post("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"text");
}
</script>
json
json的概念
vaScript Object Notation JavaScript对象表示法
* json现在多用于存储和交换文本信息的语法
* 进行数据的传输
* JSON 比 XML 更小、更快，更易解析。
-
json的使用格式
var p = {"name":"张三","age":23,"gender":"男"}; -
json定义数据
<script>
//1.定义基本格式
var person = {"name": "张三", age: 23, 'gender': true};
//获取name的值
//var name = person.name;
var name = person["name"];
// alert(name);
//alert(person);
//2.嵌套格式 {}———> []
var persons = {
"persons": [
{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}
]
};
// alert(persons);
//获取王五值
var name1 = persons.persons[2].name;
// alert(name1);
//2.嵌套格式 []———> {}
var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
//获取李四值
//alert(ps);
alert(ps[1].name);
</script>
- json获取数据
<script>
//1.定义基本格式
var person = {"name": "张三", age: 23, 'gender': true};
var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
//获取person对象中所有的键和值
//for in 循环
for(var key in person){
//这样的方式获取不行。因为相当于 person."name"
//alert(key + ":" + person.key);
alert(key+":"+person[key]);
}
//获取ps中的所有值
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for(var key in p){
alert(key+":"+p[key]);
}
}
</script>
- java和json之间的转换
使用json解析器来进行转换
JSON转为Java对象
1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
4. readValue(json字符串数据,Class)
- 代码实现部分
@Test
public void test5() throws Exception {
//1.初始化JSON字符串
String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
//2.创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//3.转换为Java对象 Person对象
Person person = mapper.readValue(json, Person.class);
System.out.println(person);
}
-
java转换为json
Java对象转换JSON 1. 使用步骤： 1. 导入jackson的相关jar包 2. 创建Jackson核心对象 ObjectMapper 3. 调用ObjectMapper的相关方法进行转换 1. 转换方法： * writeValue(参数1，obj): 参数1： File：将obj对象转换为JSON字符串，并保存到指定的文件中 Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中 OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中 * writeValueAsString(obj):将对象转为json字符串 2. 注解： 1. @JsonIgnore：排除属性。 2. @JsonFormat：属性值得格式化 * @JsonFormat(pattern = "yyyy-MM-dd") 3. 复杂java对象转换 1. List：数组 2. Map：对象格式一致
@Test
public void test1() throws Exception {
//1.创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
//2.创建Jackson的核心对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(p);
//{"name":"张三","age":23,"gender":"男"}
//System.out.println(json);//{"name":"张三","age":23,"gender":"男"}
//writeValue，将数据写到d://a.txt文件中
//mapper.writeValue(new File("d://a.txt"),p);
//writeValue.将数据关联到Writer中
mapper.writeValue(new FileWriter("d://b.txt"),p);
}
- 转换为集合
//1.创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
p.setBirthday(new Date());
Person p1 = new Person();
p1.setName("张三");
p1.setAge(23);
p1.setGender("男");
p1.setBirthday(new Date());
Person p2 = new Person();
p2.setName("张三");
p2.setAge(23);
p2.setGender("男");
p2.setBirthday(new Date());
//创建List集合
List<Person> ps = new ArrayList<Person>();
ps.add(p);
ps.add(p1);
ps.add(p2);
//2.转换
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(ps);
// [{},{},{}]
//[{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}]
System.out.println(json);
2831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
