Ajax of Day29SSM submits json to Controller method***

learning target

  • (1)Ajax
  • (2)bootstrap
  • (3)pageHelper

Ajax submit json to the controller method

k1=v1&k2=v2 Is by $('#update_form').serialize() not json
{k1:v1,k2:v2}

  • (1) Controller method
    @RequestMapping(path = "/update2", method = RequestMethod.POST, consumes = "application/json")
    public String update2( @RequestBody Department department)
  • (2) Postman submission
  • (3) Front page submission
  • $.ajax()
  • contentType:"application/json;charset=UTF-8",

DepartmentV3Controller

@Controller
@RequestMapping("/deptv3")
public class DepartmentV3Controller {
    
    
    private static final Logger l = LoggerFactory.getLogger(DepartmentV3Controller.class);
    @Autowired
    IDepartmentService iDepartmentService;

    @RequestMapping(path="/addUI",method = RequestMethod.GET)
    public String addUI(){
    
    
        return "add_dept";
    }
    @RequestMapping(path="/add",method = RequestMethod.POST,consumes = "application/json")
    public @ResponseBody  Object add(@RequestBody  Department dept){
    
    //{did:0,dname:IOS}
        l.info("add dept="+dept);
        try {
    
    
            iDepartmentService.saveDepartment(dept);
            return Result.init(200,"添加成功",null);
        } catch (Exception e) {
    
    
            e.printStackTrace();
        }
        return Result.init(-200,"添加失败",null);
    }
}

postman test Controller

Insert picture description here

add_dept.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<html>
<%
    pageContext.setAttribute("path", request.getContextPath());
%>
<head>
    <title>Title</title>
    <!-- 引入-->
    <script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>

    <script type="text/javascript">
        $(function () {
     
     
                $('#btn_add').click(function () {
     
     
                   //js发送请求
                   var dname= $('#add_dname').val()
                    console.info(dname)
                    $.ajax({
     
     
                        url:'${path}/deptv3/add',
                        async:true,
                        data:'{"did":"","dname":"'+dname+'"}',
                        type:"post",
                        contentType:"application/json;charset=UTF-8",
                        success:function (result) {
     
         //js接收结果
                            if(200==result.code){
     
     
                                alert(result.msg) //js更新页面
                                //刷新列表
                            }
                        },
                        error:function () {
     
     
                            alert('服务问题,请求失败')
                        }
                    });



                })
        })
    </script>
</head>
<body>

    <div id="addDiv">
        <h1>添加页面</h1>
        <form id="add_form"  >
            <input type="hidden" name="did" id="add_did"/><br/>
            <input type="text" name="dname" id="add_dname"/><br/>
            <input id="btn_add" type="button" value="保存"/><br/>
        </form>
    </div>

</body>
</html>

Guess you like

Origin blog.csdn.net/u013621398/article/details/109174481