实习知识整理6:前后端利用jQuery $.ajax数据传输的四种方式

方式1:前端发送key/value(String字符串),后台返回文本

前端:

html 复制代码
<input id="test1" type="button" value="前端发送key/value(String字符串),后台返回文本"/>
javascript 复制代码
$(function() {

    $("#test1").click(function () {
        $.ajax({
            type:"post",//指定后台接收方式  后台可以使用@RequstMapping 或者 @PostMapping接收
            url:"http://localhost:8082/project/jsonTest1",
            data:"userName=jzt1&passWord=123&type=car",
            // contentType: '', // 指定后端接受的类型,后端不需要json格式,可以不指定
            // dataType: '',   // 指定后台返回前台的结果类型,如果不添加该属性,默认为String类型
            success:function (data) {//回调方法
                console.log(data);
            },error:function (e) {
                console.log(e);
                console.log("通讯失败");
            }
        });
    });
});

后端:

java 复制代码
    //  http://localhost:8082/project/jsonTest1
    @PostMapping("/jsonTest1")
    @ResponseBody
    //@ResponseBody的作用:将返回值转换为数据  ->
    // 1. 如果是字符串,不做任何转换
    // 2. 如果是对象,将对象转换为json格式返回
    public String jsonTest1(String userName, String passWord, User user) throws Exception {
        System.out.println("userName:" + userName);
        System.out.println("passWord:" + passWord);
        System.out.println("user:" + user.toString());
        return "后台返回需要的数据";
    }

方式2:前端发送key/value(String字符串),后台返回JSON

前端:

html 复制代码
<input id="test2" type="button" value="前端发送key/value(String字符串),后台返回JSON"/>
javascript 复制代码
    $("#test2").click(function () {
        $.ajax({
            type:"post",
            url:"http://localhost:8082/project/jsonTest2",
            data:"userName=tom&passWord=123",
            dataType:'json',//指定后台返回前台的结果类型
            success:function (data) {//回调方法
                console.log(data);
            },error:function (e) {
                console.log(e);
                console.log("通讯失败");
            }
        });
    });

后端:

java 复制代码
    //  http://localhost:8082/project/jsonTest1
    @PostMapping("/jsonTest2")
    @ResponseBody
    //@ResponseBody的作用:将返回值转换为数据  ->
    // 1. 如果是字符串,不做任何转换
    // 2. 如果是对象,将对象转换为json格式返回
    public User jsonTest2(String userName, String passWord, User user) throws Exception {
        System.out.println("userName:" + userName);
        System.out.println("passWord:" + passWord);
        System.out.println("user:" + user.toString());
        user = userService.findUserByName(userName);

        return user;
    }

方式3:前端发送JSON,后台返回文本

前端:

html 复制代码
<input id="test3" type="button" value="前端发送JSON,后台返回文本"/>
javascript 复制代码
$("#test3").click(function () {
        $.ajax({
            type:"post",
            url:"http://localhost:8082/project/jsonTest3",
            contentType:"application/json;charset=utf-8",//指定前台向后台传递数据类型  json格式
            data:'{"userName":"jzt1","passWord":"123"}',
            success:function (data) {//回调方法
                console.log(data);
            },error:function (e) {
                console.log(e);
                console.log("通讯失败");
            }
        });
    });

后端:

java 复制代码
    //  http://localhost:8082/project/jsonTest3
    @PostMapping("/jsonTest3")
    @ResponseBody
    //@ResponseBody的作用:将返回值转换为数据  ->
    // 1. 如果是字符串,不做任何转换
    // 2. 如果是对象,将对象转换为json格式返回
    public String jsonTest3(@RequestBody User user) throws Exception {   // 如果前台发送的数据是json格式的数据,需要使用 @RequestBody声明!!!
        System.out.println("user:" + user.toString());
        return "后台文本";
    }

方式4:前端发送JSON,后台返回JSON

前端:

java 复制代码
<input id="test4" type="button" value="前端发送JSON,后台返回JSON"/>
javascript 复制代码
    $("#test4").click(function () {
        $.ajax({
            type:"post",
            url:"http://localhost:8082/project/jsonTest4",
            contentType:"application/json;charset=utf-8",//指定前台向后台传递数据类型  json格式
            dataType:'json',//指定后台返回前台的结果类型
            data:'{"userName":"tom","passWord":"123"}',
            success:function (data) {//回调方法
                console.log(data);
            },error:function (e) {
                console.log(e);
                console.log("通讯失败");
            }
        });
    });

后端:

java 复制代码
    //  http://localhost:8082/project/jsonTest4
    @PostMapping("/jsonTest4")
    @ResponseBody
    //@ResponseBody的作用:将返回值转换为数据  ->
    // 1. 如果是字符串,不做任何转换
    // 2. 如果是对象,将对象转换为json格式返回
    public User jsonTest4(@RequestBody User user) throws Exception {
        System.out.println("user:"+ user.toString());
        user = userService.findUserByName(user.getUserName());
        return user;
    }
相关推荐
小桥风满袖21 小时前
极简三分钟ES6 - 类与继承
前端·javascript
子兮曰21 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f21 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖21 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰21 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
练习时长两年半的Java练习生(升级中)21 小时前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
豆沙沙包?21 小时前
2025年- H118-Lc86. 分隔链表(链表)--Java版
java·数据结构·链表
良木林1 天前
JS中正则表达式的运用
前端·javascript·正则表达式
A尘埃1 天前
智能工单路由系统(Java)
java·开发语言·智能工单
芭拉拉小魔仙1 天前
【Vue3+TypeScript】H5项目实现企业微信OAuth2.0授权登录完整指南
javascript·typescript·企业微信