ajax 以json形式提交表单

表单元素转JSON

clipboard.png

自定义一个函数

$.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;
};

ajax提交表单

$.ajax({
    type : "POST",
    url : "rest/role/new",
    dataType : "json",
    data : $("#form_add_roleRecord").serializeObject(),
    success : function(data) {
        alert("成功");
    },
    error : function(data) {
        alert("失败");
        console.log(data);
    }
});

java后台接收

我的后台使用了spring mvc

//模型
public class Role {
    private Long id;

    private String roleName;

    private String roleSign;

    private String description;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getRoleName() {
        return roleName;
    }

    public void setRoleName(String roleName) {
        this.roleName = roleName == null ? null : roleName.trim();
    }

    public String getRoleSign() {
        return roleSign;
    }

    public void setRoleSign(String roleSign) {
        this.roleSign = roleSign == null ? null : roleSign.trim();
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description == null ? null : description.trim();
    }

    @Override
    public String toString() {
        return "Role [id=" + id + ", roleName=" + roleName + ", roleSign=" + roleSign + ", description=" + description + "]";
    }

}

//控制器
@Controller
@RequestMapping(value = "/role")
public class RoleController {

    @RequestMapping(value = "/new", method = RequestMethod.POST, produces = { "application/json;charset=UTF-8" })
    @ResponseBody
    public String newRecord(Role role, HttpServletRequest request) {
        try {
            System.out.println(role.toString());
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "{\"success\":\"true\"}";
    }
}


//输出
Role [id=null, roleName=testaa, roleSign=user:create, description=]

毛宇鹏V
只有不断学习,才有转变的机会.

毛君能颖脱,宇宙隘而妨,鹏息风还起。

440 声望
11 粉丝
0 条评论
推荐阅读
Html 打印模板 (带页眉页脚)
{代码...}

毛宇鹏阅读 1.7k

再也不学AJAX了!(三)跨域获取资源 ① - 同源策略
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第四篇,最近更新于 2023 年 1...

libinfs19阅读 4.1k评论 4

封面图
再也不学 AJAX 了!(一)AJAX 概述
跨域获取数据:介绍了与「跨域发送 AJAX 请求」相关的一些内容:例如「同源策略」与四种跨域请求资源的方式:JSONP,CORS,postMessage 和 WebSocket;

libinfs22阅读 4k评论 6

封面图
从JQuery出发总结的关于原型使用上的一些浅薄理解
MyObj本身是一个对象,可以通过MyObj.doit()的方式调用其上的方法或属性为了实现需求,第一反应是: {代码...} 然后在MyObj上挂载静态方法,在MyObj.prototype上挂载对象方法。

zxl200707014阅读 361

封面图
再也不学AJAX了!(二)使用AJAX ② Fetch API
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第三篇,最近更新于 2023 年 1...

libinfs2阅读 873

封面图
Ajax实现搜索联想 搜索关键词提醒 无刷新搜索
通过javascript监听搜索框的内容,调用后端即可。(1)javascript监听搜索框的内容(2)把搜索框的关键词传给后端进行搜索(3)搜索到结果,遍历到页面

TANKING1阅读 4.7k

【永久开源】Pear Admin Layui 基于 Layui 的后台管理模板
Pear Admin Layui 是基于 Layui 的后台管理系统模板,扩展Layui原生UI样式,整合第三方开源组件,提供便捷快速的开发方式,延续LayuiAdmin的设计风格,持续完善的样式与组件的维护,基于异步Ajax的菜单构建,相对...

就眠仪式2阅读 7.1k评论 1

毛君能颖脱,宇宙隘而妨,鹏息风还起。

440 声望
11 粉丝
宣传栏