JS Ajax 前后端传参

原创已于 2022-07-05 11:27:39 修改 · 1.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ajax #post #js

于 2020-03-05 22:13:39 首次发布

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨了Ajax在前端开发中的应用，展示了如何利用Ajax进行局部页面刷新，以提升复杂页面的性能和用户体验。通过具体示例，讲解了JS原生Ajax的实现方式，包括参数传递、回调函数处理及前后端交互细节。

介绍

Ajax在前端的应用可以极大的提升用户体验，通过Ajax可以局部刷新页面，对于复杂页面，这是十分有效的方式

比如文章页面下面的评论信息，就可以使用Ajax进行局部刷新，文章的点赞量，收藏量等信息也可以进行局部加载，极大的优化了页面性能，使得前端不成为用户体验的瓶颈，当然现在的静态页面前端框架技术进一步优化了像JSP，Thymeleaf等模板引擎的性能，这个我们后面再说

今天主要来介绍一下前端框架常用的组件——基于JS原生的Ajax

JS

要注意的是几个参数的含义，参数的类型，以及回调函数的处理

function load() {
    var userid = $("#userId").val();
    var html = "";
    $.ajax({
        url: "/blog/myinfo", //请求后台地址
        data:{id:userid}, //这里传的data是JS对象
        type: "post", //请求方式 get post
        dataType: "json", //data的类型为json
        //success回调函数，还有个error回调函数，json为后台返回的数据，一般是json对象类型，
        //这样我们可以进行解析，然后将数据渲染到页面上
        success: function (user) { 
            //console.log(json);
            $("#content").html(json.html);
            $("#mySelf div").addClass("active");
            html = "";
        }
    });
}

注意

对于data参数需要进一步说明，对于post请求，如果Ajax中data传的是形如

{id:userid,name:username}

这样的JSON对象类型，则后端的接收可以用下面的方式

@GetMapping(@RequestParam("id") String id, @RequestParam("name") String name)

如果传的对象，后台有对应的VO，则还可以用对象接收，如下

@PostMapping(User user)

其中User为

public User {
	private String id;
	private String username;
}