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

本文链接：https://blog.youkuaiyun.com/qq_30225725/article/details/109701363

本文详细介绍了Ajax的工作原理，以及在RESTful API中如何使用Spring MVC的@PathVariable来绑定URL中的占位符参数。通过示例展示了四种不同的Ajax参数传递方式，并讨论了非异步方式下前后台数据的传递。@PathVariable使得服务器能方便地接收和处理来自客户端的参数，用于数据计算、ID获取等操作。

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

图解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