ajax实现restful风格

最新推荐文章于 2023-03-01 15:46:45 发布

求学务实

最新推荐文章于 2023-03-01 15:46:45 发布

阅读量2.8k

点赞数 2

分类专栏： Ajax学习篇文章标签：如何使用ajax实现restful

Ajax学习篇专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用SpringMVC框架结合RESTful风格API实现数据的增删改查(CRUD)操作，包括环境配置、代码示例及前端交互实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文来源：https://blog.youkuaiyun.com/u012737182/article/details/52830596

个人理解：

在同一个路径下，不同的协议请求（Get、Post、Put、Delete、Patch、Head、Option s、Trace）实现不同的功能。

一、环境配置
①、开发前的基础配置：配置好相应的Spring MVC、JSON和Restful需要的依赖程序包。
②、Tomcat9.0服务器配置
③、在项目配置web.xml

    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param> 
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext-mvc.xml</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <!-- 路径是 '/' 斜杠 -->
        <url-pattern>/</url-pattern>
    </servlet-mapping>
 ④、建立一个测试类TextRestful .java，测试环境是否可用

  @Controller 
public class TextRestful {
    @RequestMapping(value="/restful",produces="text/plain;charset=UTF-8")
    public @ResponseBody String info() {
        return "Hello World!";
    }
}

浏览器输入路径：http://localhost/XXXX（项目名称） / restful（方法路径） 

页面显示：Hello World!则代表环境搭建完成。 


⑤准备要测试的Vo类
public class Emp implements Serializable {
    private Integer empno;
    private String ename;
    private double sal;
    private Date hiredate;
    //此处省略setter()、getter()和toString()方法
}

⑥准备好测试的test.JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    // request.setCharacterEncoding("UTF-8") ;
%>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/restful.js"></script>
<title>Insert title here</title>
</head>
<body>
    <input type="button" id="addBut" name="addBut" value="增加"><br>
    <input type="button" id="editBut" name="editBut" value="更新"><br>
    <input type="button" id="deleteBut" name="deleteBut" value="删除"><br>
    <input type="button" id="getBut" name="getBut" value="查询"><br>
    <input type="button" id="listBut" name="listBut" value="分页显示"><br>
    <div id="showDiv"></div>
</body>
</html>

二、Restful风格实现CRUD
1、POST请求实现数据增加：
①、在TextRestful.java中增加：

@RequestMapping(value="/restful",method=RequestMethod.POST,produces="application/json;charset=UTF-8")
    public @ResponseBody Object add(Emp vo){
        log.info("数据增加成功："+vo);
        JSONObject js = new JSONObject();
        js.put("flag", true);
        return js;
    }

②、在restful.js中增加：

$(addBut).on("click",function(){
        $.ajax({
            url: "restful",
            type : "post",
            data : {
                empno : 110,
                ename : "RESTful",
                sal : 1.1,
                hiredate : "1111-11-11"
            },
            success : function(data){
                $(showDiv).append("<p> 数据增加成功："+data.flag+"</p>");
            },
            dataType : "json",
            error : function(data){
                $(showDiv).append("<p>出错了</p>");
            }
        })
    });

2、PUT请求实现数据更新
①、在TextRestful.java中增加：

@RequestMapping(value="/restful",method=RequestMethod.PUT,produces="application/json;charset=UTF-8")
    public @ResponseBody Object edit(Emp vo){
        log.info("数据更新成功："+vo);
        JSONObject js = new JSONObject();
        js.put("flag", true);
        return js;
    }

②、在restful.js中增加：

$(editBut).on("click",function(){
        $.ajax({
            url: "restful",
            type : "post",
            data : {
                _method : "put",
                empno : 110,
                ename : "RESTful",
                sal : 1.1,
                hiredate : "1111-11-11"
            },
            success : function(data){
                $(showDiv).append("<p> 数据更新成功："+data.flag+"</p>");
            },
            dataType : "json",
            error : function(data){
                $(showDiv).append("<p>出错了</p>");
            }
        })
    });

3、DELETE请求实现数据删除
①、在TextRestful.java中增加：

@RequestMapping(value="/restful",method=RequestMethod.DELETE,produces="application/json;charset=UTF-8")
    public @ResponseBody Object remove(int mid){
        log.info("要删除的是："+mid);
        JSONObject js = new JSONObject();
        js.put("flag", true);
        return js;
    }

②、在restful.js中增加：

$(deleteBut).on("click",function(){
        $.ajax({
            url: "restful",
            method : "post" ,
            data : {
                _method : "delete",
                mid : 1
            },
            dataType : "json",
            success : function(data){
                $(showDiv).append("<p> 数据删除成功："+data.flag+"</p>");
            },
            error : function(data){
                $(showDiv).append("<p>出错了</p>");
            }
        })
    });

4、GET请求实现数据查询
①、在TextRestful.java中增加：

@RequestMapping(value="/restful/{mid:\\d+}",method=RequestMethod.GET,produces="application/json;charset=UTF-8")
    public @ResponseBody Object get(@PathVariable("mid") int mid){
        log.info("要查看的是："+mid);
        Emp vo = new Emp();
        vo.setEmpno(mid);
        vo.setEname("SMITH");
        vo.setSal(1.1);
        vo.setHiredate(new Date());
        JSONObject js = new JSONObject();
        js.put("emp", vo);
        return js;
    }

②、在restful.js中增加：

$(getBut).on("click",function(){
        $.ajax({
            url: "restful/1",
            method : "get" ,
            data : {
            },
            dataType : "json",
            success : function(data){
                $(showDiv).append("<p> 编号："+data.allMembers.empno+"，名称："+data.allMembers.ename+",工资"+
                        data.allMembers.sal+",日期:"+data.emp.hiredate+"</p>");
                console.log(1);
            },
            error : function(data){
                $(showDiv).append("<p>出错了</p>");
            }
        })
    });

5、PATCH请求实现数据分页
①、在TextRestful.java中增加：

@RequestMapping(value="/restful/{condition}",method=RequestMethod.PATCH,produces="application/json;charset=UTF-8")
    public @ResponseBody Object list(@PathVariable("condition") String param){
        log.info("查看的是："+param);
        int currentPage = 4;
        int lineSize = 5;
        List<Emp> all = new ArrayList<Emp>() ;
        for (int x = ((currentPage-1)*lineSize);x< currentPage *lineSize; x ++) {
            Emp vo = new Emp() ;
            vo.setEmpno(x);
            vo.setEname("姓名 - " + x);
            vo.setSal(10000.0 + x);
            vo.setHiredate(new Date());
            all.add(vo) ;
        }
        Map<String,Object> map = new HashMap<String,Object>();
        map.put("allEmps", all);
        return map;
    }

②、在restful.js中增加：

$(listBut).on("click",function(){
        $.ajax({
            url: "restful/1",
            method : "PATCH" ,
            dataType : "json",
            success : function(data){
                for(var t=0;t<data.allEmps.length;t++){
                    $(showDiv).append("<p> 编号："+data.allEmps[t].empno+"，名称："+data.allEmps[t].ename+",工资"+
                            data.allEmps[t].sal+",日期:"+data.allEmps[x].hiredate+"</p>");
                }
            },
            error : function(data){
                $(showDiv).append("<p>出错了</p>");
            }
        })
    })；