JackSon与AJAX的简单操作
服务器序列化与反序列化
一,序列化
/**
* 序列化为json
*/
public static String toJson(Object obj) {
String result = null;
try {
//对象映射器
ObjectMapper objectMapper = new ObjectMapper();
//设置日期格式
SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd HH:mm:ss");
objectMapper.setDateFormat(sdf);
result = objectMapper.writeValueAsString(obj);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return result;
}
二,反序列化
/** * 反序列化成对象 * * T:表示全部类型与objcet不同的是 泛型强类型 Object为弱类型 * json:需要反序列化的字符串 * valueType:反序列化的类型 * */ public static <T> T toObject(String json,Class<T> valueType) { //对象映射器 ObjectMapper mapper=new ObjectMapper(); T result=null; try { result=mapper.readValue(json,valueType); }catch (Exception e) { e.printStackTrace(); } return result; }
三,序列化时时间的问题
通过jackson序列化时时间是一个问题,它会把时间转换为1977年到现在这个时间的毫秒数,下面来解决这个问题
3.1,时间注解@JsonFormat:
在需要指定序列化对象的时间字段前面插入时间注解,转变为自己想要的格式
private String comid;
private String comname;
private String comprice;
//设置日期格式
/**
*locale:国家
*timezone:时区
*pattern:时间格式
*/
@JsonFormat(locale="zh", timezone="GMT+8", pattern="yyyy-MM-dd HH:mm:ss")
private String comtime;
private String yn;
3.2,SimpleDateFormat:
在序列化前设置好时间格式
//对象映射器
ObjectMapper objectMapper = new ObjectMapper();
//设置日期格式
SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd HH:mm:ss");
objectMapper.setDateFormat(sdf);
objectMapper.writeValueAsString(obj);
3.3,Spring MVC 返回时间到前端页面为时间戳
package com.chenjiahao.ssm.entity; import com.fasterxml.jackson.annotation.JsonFormat; import java.sql.Timestamp; public class Register { private String id; private String mobilePhone; private String pwd; private String mailbox; private Timestamp datas; public Register() { } public Register(String id, String pwd) { this.id = id; this.pwd = pwd; } public Register(String id, String mobilePhone, String mailbox) { this.id = id; this.mobilePhone = mobilePhone; this.mailbox = mailbox; } public Register(String id, String mobilePhone, String pwd, String mailbox) { this.id = id; this.mobilePhone = mobilePhone; this.pwd = pwd; this.mailbox = mailbox; } public Register(String id, String mobilePhone, String pwd, String mailbox, Timestamp datas) { this.id = id; this.mobilePhone = mobilePhone; this.pwd = pwd; this.mailbox = mailbox; this.datas = datas; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getMobilePhone() { return mobilePhone; } public void setMobilePhone(String mobilePhone) { this.mobilePhone = mobilePhone; } public String getPwd() { return pwd; } public void setPwd(String pwd) { this.pwd = pwd; } public String getMailbox() { return mailbox; } public void setMailbox(String mailbox) { this.mailbox = mailbox; } @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8",locale = "zh") public Timestamp getDatas() { return datas; } public void setDatas(Timestamp datas) { this.datas = datas; } @Override public String toString() { return "Register{" + "id='" + id + '\'' + ", mobilePhone='" + mobilePhone + '\'' + ", pwd='" + pwd + '\'' + ", mailbox='" + mailbox + '\'' + ", datas=" + datas + '}'; } }
Jackson工具包:
https://files.cnblogs.com/files/NiuBiHH/jackson.zip
四,原生AJAX
获取XHR对象
/** * 获取XHR对象 * */ function getXHR() { //window.XMLHttpRequest 普通浏览器差不多都具备的对象 if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else if(window.ActiveXObject){ //ActiveXObject("Microsoft.XMLHTTP") 为Microsoft公司的 在IE6 IE5下获得的XHR对象 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; }
状态发生改变时调用的函数
/*
*xhr.readyState等于4时 表示请求成功
*xhr.status等于200时 表示服务器响应状态成功
*xhr.responseText 取出服务器响应返回的值
*/
XHR.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ xhr.responseText;
} } }
open() 如果是本地的话可以用openReques()代替
/*
* method 请求的类型 如:get post
* url 请求是路径
* asycn 是否是异步请求 默认为true
*/
void open( DOMString method, DOMString url, optional boolean async, );
xhr.open("GET","CommodityControl?action=time",true);
send() 请求的所有相关事件都必须在此方法之前
xhr.send(null);
事例:
/** * 获取XHR对象 * */ function getXHR() { //window.XMLHttpRequest 普通浏览器差不多都具备的对象 if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else if(window.ActiveXObject){ //ActiveXObject("Microsoft.XMLHTTP") 为Microsoft公司的 在IE6 IE5下获得的XHR对象 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } function getTime_click(){ var xhr=getXHR(); //当状态变化时的事件 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ //请求成功 if(xhr.status==200){ //服务器响应状态成功 //将从服务器获得的数据显示在页面上 alert(xhr.responseText); } } } //打开请求 xhr.open("GET","CommodityControl?action=time",true); //请求类型,路径,是否为异步请求 //发送请求 xhr.send(null); //参数 }
五,$.ajax(options)
| 属性 | 类型 | 描述 |
| url | 字符串 | 请求的URL |
| Type | 字符串 | 请求的方法 如:GET() POST() 默认GET() |
| Data | 对象 | 请求后台时带过去的参数 |
| dataType | 字符串 | 设置服务器返回数据的类型 如:XML HTTP JSON SCRIPT TEXT |
| timeout | 数值 | 设置请求时间 如果超过改时间则中止请求 并调用错误函数 |
| global | 布尔值 | 启用或者禁用全集函数的触发 |
| contentType | 字符串 | 请求的内容类型 |
| success | 函数 | 请求成功时调用改函数,该函数第一个参数为服务器的响应值 |
| error | 函数 | 请求响应指示错误状态码,携带三个实参调用该函数:请求对象 , 状态消息字符串 , 异常对象 |
| complete | 函数 | 请求响应指示成功状态码,调用该函数, 如果指定了success或error回调函数,则在他们被调用之后在调用该函数 |
| beforeSend | 函数 | 发起请求前调用的函数 |
| async | 布尔值 | 指定是否为异步请求 |
事例:
$.ajax({
type: "get", //请求类型
url: "CommodityControl?action=allcom", //路径
beforeSend: function () { //请求前的事件
c.show();
},
success: function (data) { //请求成功后的事件
$.each(data, function (index, obj) {
var tr = $("<tr/>");
var inptd = $("<td/>");
$("<input name='comCheck' class='comCheck' type='checkbox'/>").html(obj.comtime).appendTo(inptd).data("id", obj.comid);
inptd.appendTo(tr);
$("<td/>").html(obj.comid).appendTo(tr);
$("<td/>").html(obj.comname).appendTo(tr);
$("<td/>").html(obj.comprice).appendTo(tr);
$("<td/>").html(obj.comtime).appendTo(tr);
var inputtd = $("<td/>");
if (obj.yn == 'y') {
$("<input name='yn' checked='' value='y' type='checkbox'/>").html(obj.comtime).appendTo(inputtd);
}
else {
$("<input name='yn' type='checkbox'/>").html(obj.comtime).appendTo(inputtd);
}
inputtd.appendTo(tr);
var atd = $("<td/>");
$("<a href='#'class='aupdate'></a> ").html("详细 ").appendTo(atd).data("id", obj.comid);
$("<a href='#' class='adel'></a> ").html(" 删除").appendTo(atd).data("id", obj.comid);
atd.appendTo(tr);
$("#com").append(tr);
c.close();
});
},
complete: function () { //请求完成时的事件，不论成功或失败
$("#hint").html("请求完成...");
},
error: function (xhr, textStatus, errorThrown) { //错误时
alert(xhr + textStatus + errorThrown);
}
六,ajax一些帮助方法
6.1:定义页面的共用函数
(只能是同一个页面 多个ajax共用的函数)
$.ajaxSetup({...})
如:
$.ajaxSetup({
beforeSend: function() {
$("#msg")[0].innerHTML += "请求中...<br/>";
},
complete: function() {
$("#msg")[0].innerHTML += "请求完成...<br/>";
},
error: function() {
$("#msg")[0].innerHTML += "请求失败...<br/>";
}.........
});
6.2:全局函数
1,请求开始时触发的事件
$("......").ajaxStart(function() { ....})
2.请求出错时触发的事件 $("....").ajaxError(function(event,xhr,options,exc) {
event:事件对象
xhr:XMLHttpRequest对象
options:在AJAX request中使用的参数
})
3.请求成功时触发的事件 $(".....").ajaxSuccess(function() {......}) 4.发送时触发的事件 $("......").ajaxSend(function(evt, request, settings) {
event:事件对象
xhr:XMLHttpRequest对象
options:在AJAX request中使用的参数
})
5.请求完成时触发的事件(不管请求有没有成功) $("....").ajaxComplete(function( event, xhr, settings ) {.....}
6.3:辅助ajax使用的一些方法
| JSON.stringify(....) | 序列化对象为json对象 如:({"name":"....","age":...}) |
| JSON.parse(.....) | 将json对象反序列化为普通对象 如:({name:"...",age:...}) |
| $("...").serialize() | 获取表单中的所有内容并参数化 如:uid=...&pwd=..... |
| $("...").serializeArray() | 将表单中的元素序列化为数组对象 如:[{"name":"uid","value":"...."},"name":"pwd","value":"...."}] |
| $.param(....) | 将对象参数化 如:uid=...&pwd=... |
