ssm前后端数据传输

qq_42392371

于 2023-02-09 10:25:44 发布

阅读量240

点赞数 1

文章标签：前端 java spring Powered by 金山文档

本文链接：https://blog.csdn.net/qq_42392371/article/details/128942574

版权

1.启动页面表单的rest功能

application.properties 配置文件设置格式：

spring.mvc.hiddenmethod.filter.enabled=true

application.yaml 配置文件设置格式：

spring:
  mvc:
    hiddenmethod:
      filter:
        enabled: true   #开启页面表单的Rest功能

2.数据传输实例

实体类Person

@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class Person {
    private Integer pid;
    public String pname;
    public Integer page;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
  <!-- 引入Jquery 2.1.1 -->
  <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form action="/person" method="get">


  <!-- value设置请求类型，name属性可以自定义设置，例如 _m -->
<!--  <input type="hidden" value="put" name="_method">-->


  <!-- 表单内容 -->
  pid:<input type="text" value="1" name="pid">
  pname:<input type="text" value="张三" name="pname">
  page:<input type="text" value="22" name="page">
  <input type="submit" value="getTset">

</form>


<form action="/person" method="post">
  pid:<input type="text" value="1" name="pid">
  pname:<input type="text" value="张三" name="pname">
  page:<input type="text" value="22" name="page">
  <input type="submit" value="postTset">

</form>


<form action="/person" method="post">
    <input type="hidden" value="put" name="_method">
  pid:<input type="text" value="1" name="pid">
  pname:<input type="text" value="张三" name="pname">
  page:<input type="text" value="22" name="page">
  <input type="button" onclick="putRequestBody()" value="putTset">

</form>
<form action="/person" method="post">
    <input type="hidden" value="delete" name="_method">
  pid:<input type="text" value="1" name="pid" id="pid">
  pname:<input type="text" value="张三" name="pname" id="pname">
  page:<input type="text" value="22" name="page" id="page">
  <input type="submit" value="deleteTset">

</form>
</body>


<script>
  function putRequestBody() {
    var pid = $("#pid").val();
    var pname = $("#pname").val();
    var page = $("#page").val();
    let papers = {"pid": pid, "pname": pname,"page": page};
    console.log(papers);
    console.log(JSON.stringify(papers));
    $.ajax({
      type:"put",
      url:"person",
      data:JSON.stringify(papers),
      contentType: 'application/json;charset=UTF-8',
      success: function (mess) {
        console.log(mess);
      },
      dataType:"json"
    })
  }


</script>
</html>

handler取值的几种方式：（@Responsebody获取的值必须是json格式，并且要设置编码格式：）

       let papers = {"pid": pid, "pname": pname,"page": page};
    data:JSON.stringify(papers),
    contentType: 'application/json;charset=UTF-8',

import com.example.springboot0.bean.Person;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;


@Slf4j
@RestController
public class PersonHandler {


    @GetMapping(value = "person")
    public Person getPerson(Person person) {
        log.info("get person...{}", person);
        return person;
    }
    @GetMapping(value = "person/{pid}")
    public String getPid(@PathVariable("pid") String pid) {
        log.info("get pid...{}", pid);
        return pid;
    }


    @PostMapping(value = "person")
    public Person postPerson(
            @RequestParam("pid") Integer pid,
            @RequestParam("pname") String pname,
            @RequestParam(value = "page",required = true,defaultValue = "0") Integer page
    ) {
        log.info("post...{}",new Person(pid,pname,page));
        return new Person(pid,pname,page);
    }
    @DeleteMapping(value = "person")
    public Person delPerson(
            @RequestParam("pid") Integer pid,
            @RequestParam("pname") String pname,
            @RequestParam(value = "page",required = true,defaultValue = "0") Integer page
    ) {
        Person person = new Person(pid, pname, page);
        log.info("delete...{}", person);
        return person;
    }


    @PutMapping(value = "person")
    @ResponseBody
    public Person putPerson(@RequestBody Person person) {
        log.info("get person...{}", person);
        return person;
    }
}