SpringMVC结合Ajax使用Restful风格实现前后端分离

1 篇文章 0 订阅
1 篇文章 0 订阅
传输数据类型为Json格式:

1.在web.xml中开启put,和delete的支持:

    <filter>
        <filter-name>hiddenHttpMethodFilter</filter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>hiddenHttpMethodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

2.导入jackson的jar包:

    <!-- jackson begin -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
        <version>2.9.3</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-annotations</artifactId>
        <version>2.9.3</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.9.3</version>
    </dependency>
    <!-- jackson end -->
3.Controller配置:由于从前端页面接收的字符串格式为Json格式,所以在后台Controller中使用对象接收时要在参数前使用@RequestBody,否则会报415错误。关于@RequestBody的用法请见  点击打开链接
    @RestController
    @RequestMapping(value="user")
    public class LoginController {
			
        @RequestMapping(value="/manage", method=RequestMethod.POST)
        public String add(@RequestBody User user) {
            System.out.println("post: username----" + user.getUsername());
            System.out.println("post: password----" + user.getPassword());
            if(StringUtils.isBlank(user.getUsername()) || StringUtils.isBlank(user.getPassword())) {
                return "failed";
            }
            return "success";
        }
			
        @RequestMapping(value="/manage", method=RequestMethod.PUT)
        public String update(@RequestBody User user) {
            System.out.println("put: username-------" + user.getUsername());
            System.out.println("put: password-------" + user.getPassword());
            if(StringUtils.isBlank(user.getUsername()) || StringUtils.isBlank(user.getPassword())) {
                return "failed";
            }
            return "success";
        }
			
        @RequestMapping(value="/manage", method=RequestMethod.DELETE)
        public String delete(@RequestBody User user) {
            System.out.println("delete: username-------" + user.getUsername());
            System.out.println("delete: password-------" + user.getPassword());
            if(StringUtils.isBlank(user.getUsername()) || StringUtils.isBlank(user.getPassword())) {
                return "failed";
            }
            return "success";
        }
    }
4.前端页面,在发送一个put/delete请求的时候,我们需求添加一个隐藏域:
    <form id="login_form">
        <input type="hidden" name="_method" value="put"/>
        <input name="username" id="username"/>
        <input id="submit" type="button">
    </form>
    <form id="login_form">
        <input type="hidden" name="_method" value="delete"/>
        <input name="username" id="username"/>
        <input id="submit" type="button">
    </form>
5.ajax中的写法:
    $.ajax({
        type: "post",
        url: "xxx",
        contentType: "application/json",
        data: JSON.stringify({username: $('#username').val()}),
        success: function(result){
            //此处省略
        },
        error: function(result){
            //此处省略
        }
    });






  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值