在这里插入图片描述
图解 Ajax 工作原理
Ajax 指 Asynchronous JavaScript and xml(异步的 JavaScript 和 xml), 最大的优点是在不重新加载整个页面的情况下, 可以与服务器交换数据并更新部分网页内容. 而实现的原理基础就是: 网页 DOM 对象可以精确地对网页中的部分内容进行操作, xml 作为单纯的数据存储载体使得客户端与服务器交换的只是网页内容的数据而没有网页样式等等的附属信息, XMLHttpRequest 是与浏览器本身内置的 request 相互独立的与服务器交互的请求对象.
网页应用 Ajax 与服务器交互的抽象过程如下图:
在这里插入图片描述
在这里插入图片描述
@PathVariable 映射 URL 绑定的占位符
带占位符的 URL 是 Spring3.0 新增的功能, 该功能在 SpringMVC 向 REST 目标挺进发展过程中具有里程碑的意义
通过 @PathVariable 可以将 URL 中占位符参数绑定到控制器处理方法的入参中: URL 中的 {xxx} 占位符可以通过 @PathVariable("xxx") 绑定到操作方法的入参中.
- //@PathVariable 可以用来映射 URL 中的占位符到目标方法的参数中
- @RequestMapping("/testPathVariable/{id}")
- public String testPathVariable(@PathVariable("id") Integer id)
- {
- System.out.println("testPathVariable:"+id);
- return SUCCESS;
- package com.day01springmvc.controller;
- import org.springframework.stereotype.Controller;
- import org.springframework.web.bind.annotation.*;
- import org.springframework.Web.servlet.ModelAndView;
- /**
- * @ Author :ShaoWei Sun.
- * @ Date :Created in 20:58 2018/11/16
- */
- @Controller
- @RequestMapping("hello")
- public class HelloController2 {
- /**
- *3, 占位符映射
- * 语法:@RequestMapping(value="user/{userId}/{userName}")
- * 请求路径: http://localhost:8080/hello/show5/1/james
- * @param ids
- * @param names
- * @return
- */
- @RequestMapping("show5/{id}/{name}")
- public ModelAndView test5(@PathVariable("id") Long ids ,@PathVariable("name") String names){
- ModelAndView mv = new ModelAndView();
- mv.addObject("msg","占位符映射: id:"+ids+";name:"+names);
- mv.setViewName("hello2");
- return mv;
- }
- }
在这里插入图片描述
Ajax 异步请求将客户端输入的参数向服务器 代码:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title > 使用 jQuery 发送 Ajax 请求 </title>
- <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
- <script type="text/javascript">
- // 使用 $.Ajax() 发送 Ajax 请求
- function doLogin(){
- var username=$("#username").val();
- var pwd=$("#pwd").val();
- $.Ajax({
- //type:"post",
- type:"get",
- url:"login",
- async:true,
- //data:"username="+username+"&pwd="+pwd,
- data:{
- "username":username,
- "pwd":pwd,
- },
- dataType:"text",
- success:function(data){
- if(data=="ok"){
- $("#login").HTML("欢迎您:"+username);
- }else{
- $("#loginInfo").HTML("用户名或密码不正确");
- $("#loginInfo").CSS({
- "font-size":"12px",
- "color":"red"
- });
- }
- },
- error:function(){
- $("#loginInfo").HTML("AJAX 请求失败");
- },
- beforeSend:function(){
- $("#loginInfo").HTML("正在登陆中......");
- }
- });
- }
- // 使用 $.post() 发送 Ajax 请求
- function doLogin2(){
- var username=$("#username").val();
- var pwd=$("#pwd").val();
- $.post("login",{
- "username":username,
- "pwd":pwd
- },function(data){
- if(data=="ok"){
- $("#login").HTML("欢迎您:"+username);
- }else{
- $("#loginInfo").HTML("用户名或密码不正确");
- $("#loginInfo").CSS({
- "font-size":"12px",
- "color":"red"
- });
- }
- });
- }
- </script>
- </head>
- <body>
- <div id="login">
- <label for="username"> 用户名:</label><input id="username" />
- <label for="pwd"> 密码:</label><input type="password" id="pwd" />
- <input type="button" value="登陆" onclick="doLogin2()" />
- <span id="loginInfo"></span>
- </div>
- <div id="content">
页面主体内容
</div> </body> </HTML>
Ajax 接收 传递过来的参数 有四种形式
// 前台传值方法 // 触发该方法调用 Ajax function testAjax(yourData) { $.Ajax({ type: "get", // 以 get 方式发起请求 url: "/yourUrl?yourDataName=" + yourData, // 将你的请求参数以问号拼接到 url 中进行参数传递 success(data) { // data 为返回值 // 成功后的回调方法 } }) } // 后台接值方法 @RequestMapping("/yourUrl") @ResponseBody // @RequestParam("yourData") 是必不可少的, 因为他指定了链接中的参数名称 public String yourUrl(@RequestParam("yourData") String yourData) { System.out.println(yourData); // 返回值可以自由定义 return "SUCCESS"; }
// 前台传值方法, 其实大体与上方相同只需注意 url 即可 // 触发该方法调用 Ajax function testAjax(yourData) { $.Ajax({ type: "get", // 以 get 方式发起请求 url: "/yourUrl/"+yourData, // 将你的请求参数拼接到 url 中进行参数传递 success(data) { // data 为返回值 // 成功后的回调方法 } }) } // 后台接值方法 @RequestMapping("/yourUrl/{yourDataName}") @ResponseBody // 同样 @PathVariable("yourDataName") 必不可少, 因为他指定链接中某个位置代表着名为 yourDataName 的变量 public String yourUrl(@PathVariable("yourDataName") String yourData) { System.out.println(yourData); // 返回值可以自由定义 return "SUCCESS"; }
// 前台传值方法 function testAjax() { $.Ajax({ type: "post", // 以 post 方式发起请求 url: "/yourUrl", // 你的请求链接 data:$("#myForm").serialize(), // 对 id 为 myForm 的表单数据进行序列化并传递到后台 success(data) { // data 为返回值 // 成功后的回调方法 } }) } // 后台接值方法 @RequestMapping("/yourUrl") @ResponseBody // 在这里我假设大家表单数据与 User 实体类相对应 public String yourUrl(User user) { System.out.println(user.toString()); return "SUCCESS"; }
// 前台传值方法 function testAjax() { $.Ajax({ type: "post", // 以 post 方式发起请求 url: "/yourUrl", // 你的请求链接 data: { // 提交数据 "username": "admin", // 前者为字段名, 后者为数据 "password": "admin" }, success(data) { // data 为返回值 // 成功后的回调方法 } }) } @RequestMapping("/yourUrl") @ResponseBody // 在这里我假设大家表单数据与 User 实体类相对应 public String yourUrl(@RequestParam("username") String username, @RequestParam("password") String password) { System.out.println("username="+username+";password="+password); return "SUCCESS"; }
PrintWriter out = response.getWriter(); try { out.write("yourWillReturnData"); } catch (Exception e) { e.printStackTrace(); }finally{ out.close(); } // 无论通过那种方式, 只需在前台 Ajax 得 success 回调方法中对数据进行处理即可, 我们以 user 为例 success(user){ alert("返回的用户名为:"+user.username+"!!! 密码为:"+user.password); // 在浏览器控制台打印结果, 点击 f12 可以查看 console.log("返回的用户名为:"+user.username+"!!! 密码为:"+user.password); }
<!-- form 表单提交 --> <form id="myForm" class="layui-form" action="/yourUrl" method="post"> <input type="text" name="username" required placeholder="邮箱"/> <input type="password" name="username" required placeholder="密码"/> <button type="submit" class="layui-btn"> 登录 </button> </form> <!-- a 标签拼接参数 --> <a href="/yourUrl?youDataName=yourData"> 问号传递参数 </a> <a href="/yourUrl/yourData"> 拼接链接传递参数 </a>
// 1. 可以通过 session 进行参数传递 @RequestMapping("/yourUrl") public String yourUrl(HttpServletRequest request) { // 通过 request 获取 session, 然后向 session 中放入参数 key-value request.getSession().setAttribute("yourDataName", "yourData"); // 跳转到你的视图 return "/yourViews"; } // 2. 可以通过 Model 进行参数传递 @RequestMapping("/yourUrl") public String yourUrl(Model model) { // 向 model 中加入参数 key-value model.addAttribute("yourDataName", "yourData"); // 跳转到你的视图 return "/yourViews"; } // 3. 同样可以用 request 进行参数传递 @RequestMapping("/yourUrl") public String yourUrl(HttpServletRequest request) { // 通过 request 放入参数 key-value request.setAttribute("yourDataName", "yourData"); // 跳转到你的视图 return "/yourViews"; }
来源: http://www.jianshu.com/p/0f8bb960437f