课程咨询 :186 8716 1620      qq:2066486918

昆明Java培训 > 达内新闻 > 基于表单的Ajax提交
  • 基于表单的Ajax提交

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

  • 昆明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--零基础全日制班

开班日期:11/30

Java--零基础业余班

Java--零基础业余班

开班日期:11/30

Java--周末提升班

Java--周末提升班

开班日期:11/30

Java--零基础周末班

Java--零基础周末班

开班日期:11/30

  • 网址:http://km .java.tedu.cn      地址:昆明市官渡区春城路62号证券大厦附楼6楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56