get占位符传多个参数_Ajax 最全 Resful 中 @PathVariable 占位使用, 前台发请求, 服务器接收方法流程及参数传递方法...

Ajax 最全 Resful 中 @PathVariable 占位使用, 前台发请求, 服务器接收方法流程及参数传递方法

在这里插入图片描述

图解 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}")

publicStringtestPathVariable(@PathVariable("id")Integerid)

{

System.out.println("testPathVariable:"+id);

returnSUCCESS;

packagecom.day01springmvc.controller;

importorg.springframework.stereotype.Controller;

importorg.springframework..bind.annotation.*;

importorg.springframework.Web.servlet.ModelAndView;

/**

* @ Author :ShaoWei Sun.

* @ Date :Created in 20:58 2018/11/16

*/

@Controller

@RequestMapping("hello")

publicclassHelloController2{

/**

*3, 占位符映射

* 语法:@RequestMapping(value="user/{userId}/{userName}")

* 请求路径: http://localhost:8080/hello/show5/1/james

* @param ids

* @param names

* @return

*/

@RequestMapping("show5/{id}/{name}")

publicModelAndViewtest5(@PathVariable("id")Longids,@PathVariable("name")Stringnames){

ModelAndViewmv=newModelAndView();

mv.addObject("msg","占位符映射: id:"+ids+";name:"+names);

mv.setViewName("hello2");

returnmv;

}

}

在这里插入图片描述

Ajax 异步请求将客户端输入的参数向服务器 代码:

使用 jQuery 发送 Ajax 请求

// 使用 $.Ajax() 发送 Ajax 请求

functiondoLogin(){

varusername=$("#username").val();

varpwd=$("#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").({

"font-size":"12px",

"color":"red"

});

}

},

error:function(){

$("#loginInfo").HTML("AJAX 请求失败");

},

beforeSend:function(){

$("#loginInfo").HTML("正在登陆中......");

}

});

}

// 使用 $.post() 发送 Ajax 请求

functiondoLogin2(){

varusername=$("#username").val();

varpwd=$("#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"

});

}

});

}

用户名:

密码: