java后端向前端传参数前端controller方法如何编写

最新推荐文章于 2024-07-25 20:49:26 发布

原创最新推荐文章于 2024-07-25 20:49:26 发布 · 894 阅读

3 ·

CC 4.0 BY-SA版权

springboot 同时被 3 个专栏收录

33 篇文章

订阅专栏

web

13 篇文章

订阅专栏

springmvc

6 篇文章

订阅专栏

本文详细解析了form表单提交与Ajax提交的区别及应用场景。form表单提交时，使用实体类接收参数，不可加@RequestBody注解；而Ajax提交则需用@RequestBody接收数据。文章通过具体代码示例，深入浅出地讲解了两种提交方式的正确使用方法。

form表单提交方式：如果使用实体类进行接收，不可以加上@RequestBody注解，否则会报错。
例：

<form th:action="@{/user/insert.do}">
<div class="tab-pane active" id="tab-form">
    <div class="row data-type">
        <div class="col-md-2 title">用户ID</div>
        <div class="col-md-10 data text">
            <input th:type="text" class="form-control" placeholder="用户ID" th:name="user_id" th:value="${id}" readonly="readonly">
        </div>

        <div class="col-md-2 title">用户名称</div>
        <div class="col-md-10 data">
            <input th:type="text" class="form-control" placeholder="用户名称" th:name="user_name">
        </div>

        <div class="col-md-2 title">用户密码</div>
        <div class="col-md-10 data">
            <input th:type="text" class="form-control" placeholder="用户密码" th:name="user_password">
        </div>

        <div class="col-md-2 title">用户积分</div>
        <div class="col-md-10 data">
            <input th:type="text" class="form-control" placeholder="用户积分" th:name="user_jifen">
        </div>

        <div class="col-md-2 title">用户金额</div>
        <div class="col-md-10 data">
            <input th:type="text" class="form-control" placeholder="用户金额" th:name="user_money">
        </div>

        <div class="col-md-2 title">发表数量</div>
        <div class="col-md-10 data">
            <input th:type="text" class="form-control" placeholder="发表数量" th:value="0" th:name="user_account" readonly="readonly">
        </div>

        <div class="col-md-2 title">使用时长</div>
        <div class="col-md-10 data">
            <input th:type="text" class="form-control" placeholder="使用时长" th:value="0" th:name="user_time" readonly="readonly">
        </div>

        <div class="col-md-2 title">用户收入</div>
        <div class="col-md-10 data">
            <input th:type="text" class="form-control" placeholder="用户收入" th:value="0" th:name="user_sell" readonly="readonly">
        </div>

        <div class="col-md-2 title">发起问题数量</div>
        <div class="col-md-10 data">
            <input th:type="text" class="form-control" placeholder="发起问题数量" th:value="0" th:name="user_wenti" readonly="readonly">
        </div>

        <div class="col-md-2 title">发起讨论数量</div>
        <div class="col-md-10 data">
            <input th:type="text" class="form-control" placeholder="发起讨论数量" th:value="0" th:name="user_taolun" readonly="readonly">
        </div>

        <div class="col-md-2 title">用户状态</div>
        <div class="col-md-10 data line-height36">
            <div class="form-group form-inline">
                <div class="checkbox"><label><input th:type="radio" th:name="user_status" value="0"> 冻结</label></div>
                <div class="checkbox"><label><input th:type="radio" th:name="user_status" value="1"> 正常</label></div>
            </div>
        </div>

    </div>

    <!--工具栏-->
    <div class="box-tools text-center">
        <button type="submit" class="btn bg-maroon">保存</button>
        <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
    </div>
    <!--工具栏/-->

</div>
</form>

@RequestMapping("/insert.do")
public String insert(User user){
    //获取盐
    String gensalt = BCrypt.gensalt();
    //对用户密码进行加密
    user.setUser_password(BCrypt.hashpw(user.getUser_password(), gensalt));
    userService.insert(user);
    return "forward:/user/findAll.do";
}

ajax提交方式：controller需要使用@RequestBody注解来接收，否则会报错。

<script>
var str = {
    "user_id": user_id,
    "user_name": user_name,
    "coder_title": coder_title,
    "coder_content": coder_content,
    "coder_costjifen": coder_costjifen,
    "coder_classification": coder_classification
};

$.ajax({
    dataType: "json",
    url: "/coder/insert.do",
    type: "post",
    contentType: "application/json;charset=UTF-8",
    async: false,
    data: JSON.stringify(str),
    success: function (data) {
        alert(data.message);
        window.location.href = "/";
    },
    error: function (e) {
        alert("出现错误");
        location.reload();
    }
});
</script>

@RequestMapping(value = "/insert.do",method = RequestMethod.POST)
public Result insert(@RequestBody Coder coder) {
    coder.setCoder_id(String.valueOf(idWorker.nextId()));
    coder.setCoder_status("0");
    coder.setCoder_createtime(new Date());
    coderService.insert(coder);

    System.out.println(coder);

    //更新用户信息中的发布代码数
    String user_id = coder.getUser_id();
    userService.update(user_id);

    return new Result(true, "代码发布成功", null);
}