昆明java培训
达内昆明广州春城路

18487146383

热门课程

基于表单的Ajax提交

  • 时间:2016-08-31
  • 发布:昆明Java培训
  • 来源:达内新闻

昆明Java培训机构的老师今天给大家讲,基于表单的Ajax提交。

提供一个序列化方法:

$.fn.serializeObject = function()

{

var o = {};

var a = this.serializeArray();

$.each(a, function() {

if (o[this.name] !== undefined) {

if (!o[this.name].push) {

o[this.name] = [o[this.name]];

}

o[this.name].push(this.value || '');

} else {

o[this.name] = this.value || '';

}

});

return o;

};

还有一种序列化方式:

★单表单情况:

表单:

<form action="" method="post">

First Name:<input type="text" ame="firstName" maxlength="12" size="12"/> <br/>

Last Name:<input type="text" ame="lastName" maxlength="36" size="12"/> <br/>

Gender:<br/>

Male:<input type="radio" ame="gender" value="1"/><br/>

Female:<input type="radio" ame="gender" value="0"/><br/>

Favorite Food:<br/>

Steak:<input type="checkbox" ame="foods" value="Steak"/><br/>

Pizza:<input type="checkbox" ame="foods" value="Pizza"/><br/>

Chicken:<input type="checkbox" ame="foods" value="Chicken"/><br/>

<textarea wrap="physical" cols="20" name="quote" rows="5">Enter your favorite quote!</textarea><br/>

Select a Level of Education:<br/>

<select name="education">

<option value="Jr.High">Jr.High</option>

<option value="HighSchool">HighSchool</option>

<option value="College">College</option>

</select><br/>

Select your favorite time of day:<br/>

<select size="3" ame="tOfD">

<option value="Morning">Morning</option>

<option value="Day">Day</option>

<option value="Night">Night</option>

</select>

<p><input type="submit"/></p>

</form>

对应的实体:

Student.java

e1:使用serializeObject()

序列化后的值:

JSON.stringify($('form').serializeObject()):

{"firstName":"jack","lastName":"lily","gender":"1","foods":["Pizza","Chicken"],"quote":"hello hello","education":"Jr.High","tOfD":"Day"}

请求:

$(function() {

$('form').submit(function() {

$.ajax({

url : "testStudent",

data : JSON.stringify($('form').serializeObject()),

contentType : "application/json;charset=utf-8",

type : "post",

success : function (result) {

console.log(result);

}

});

return false;

});

});

e11:SpringMVC自身进行处理

handler方法:

@RequestMapping("/testStudent")

public String testStudent(@RequestBody Student student) {

System.out.println(student);

return "success";

}

e12:引入第三方Jar包进行处理。

准备:

导入sl4j jar包,同时添加JsonUtil工具类。

JsonUtil.java

后端处理:

@RequestMapping("/testStudent")

public String testStudent(@RequestBody String inputBody) {

Student student = JsonUtil.fromJson(inputBody, Student.class);

System.out.println(student);

return "success";

}

都可以正常打印Student对象。

e2:使用serialize()

序列化后的值:

$('form').serialize():

firstName=jack&lastName=lily&gender=1&foods=Pizza&foods=Chicken&quote=hello+hello&education=Jr.High&tOfD=Day

请求:

$(function() {

$('form').submit(function() {

$.ajax({

url : "testStudent",

data : $('form').serialize(),

type : "post",

success : function (result) {

console.log(result);

}

});

return false;

});

});

handler方法:

@RequestMapping("/testStudent")

public String testStudent(Student student) {

System.out.println(student);

return "success";

}

可以正常打印Student对象。

e1和e2对比说明:

e1提交的JSON数据,e2提交的不是JSON格式的数据。e1的请求参数存放在[Request Payload]中,而e2的请求参数存放在Form Data中。

★单表单复杂数据

表单还是上面的Student表单,但是在表单外增加了:

<span id="amount">33</span>

需求是:通过Ajax发送表单数据的同时,同时发送"amount"。

经过测试,昆明Java培训机构的老师就直接说结论了,有兴趣的童鞋可以自行探索,有新的发现欢迎和我们交流。

上一篇:SpringMVC如何处理这些数据
下一篇:知识点结论

昆明java培训机构:你不知道java的小细节

昆明Java培训机构《Java编程中需注意的几大问题》

昆明java培训机构:java未来的发展走向

昆明java培训机构:java学完可以干什么!

选择城市和中心
贵州省

广西省

海南省

扫一扫

了解更多干货