jquery-form.js
的使用实例
使用ajax进行前后台交互时,数据类型定义的类型为json,一直用的是手动拼接而成,不仅长,还显得的难看。
var data = {
"dataType" : dataType,
"key" : key,
"fields" : fields
};
$.ajax({
type : "POST",
url : "search",
data : data,
dataType : "json",
contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
success : function(value) {
var p = $("" + value + "
");
$("#content").prepend(p);
},
error : function(json) {
alert("出错了。。。");
}
})
但表单中只有少数的数据的时候,可以自己进行手动的拼接,但是当表单很大,有几十个,上百个字段的时候,用这种拼接的方法,显然不靠谱。容易错还累。
所以在在新的页面中,表单提交的方式使用了jquery的控件,jqueryfrom.js.
ps:后台java语言,使用的是springmvc框架。
from表中的输入框,需要增加name属性,值和后台定义的属性名一样。
一共9个字段,在后台的实体类中同样创建对应的属性。
public class SubScriptEntity {
private String id;
// 运单号
private String billCode;
// 手机号、OpenId、邮箱地址、别名或者推送地址
private String pushTarget;
// 推送类型
private String pushCategory;
// 1.全天 2.8:00-21:00 默认1
private String pushTime;
// 1-收件、2-发件、4-到件、8-派送、16-签收 订阅多种状态 状态码相加即可 如全量订阅则为 31
private String subscriptionCategory;
// 订阅源
private String subscriptionSource;
// 订阅人(网点)
private String createBy;
// 订单号
private String orderCode;
// 收件人收件号码
private String receiver_mobile;
// 发件人手机号码
private String sender_mobile;
使用ajax提交表单。
前台代码:
JS 代码。 通过获取表单对象,使用formToArray()方法,可以获取到当前表单中的值。
function subOff() {
var flag = checkParm();
if (!flag) {
return;
}
var data = $("#formData").formToArray();
$.ajax({
type : "POST",
url : "subOff",
data : data,
dataType : "json",
contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
success : function(map) {
alert(map.message);
if (map.status) {
$("#formData")[0].reset();
}
},
error : function(map) {
alert("出现错误,请刷新页面");
}
})
}
点击提交,进入debug模式,可以看到,从表单中获取到的是一个数组类型对象,现在要把这个数组,提交到后台。
suboff是后台controller的url,数据通过ajax提交到了这个url中,formData中的数据和后台对象定义的属性相同。左边是属性,右边是它的值。
编写后台代码。
@RequestMapping("subOff")
@ResponseBody
public Object subScript(SubScriptEntity subScriptEntity) {
Map map = new HashMap();
String url = CommonUtil.getProperties("off.url");
if (!checkPram(subScriptEntity)) {
map.put("status", false);
map.put("message", MESSAGE);
return map;
}
HttpResEntity entity = subMethod(subScriptEntity, url);
map = getRes(entity);
subMethod(subScriptEntity, url);
return map;
}
后台的debug模式中,可以看到刚刚提交的数据,已经传到后台。
PS: 使用jquery.form.js 要确保springmvc 配置正确,json格式可以正常传输。