springmvc和ajax的全部例子

最新推荐文章于 2024-07-29 14:22:26 发布
最新推荐文章于 2024-07-29 14:22:26 发布
阅读量274 收藏 2
点赞数
文章标签： java 测试 json
原文链接：https://my.oschina.net/u/3005325/blog/2252449
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

function jajax1() {
    var reqdata = {
        p1:'success'
    }
    $.ajax({
        url: '/testreq/jsonreq',
        type: 'get',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: reqdata,//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping("/jsonreq")
            @ResponseBody
            public Map jsonreq(@RequestParam(value = "p1", required = false) String p1) {
                Map map = new HashMap();
                map.put("p1",p1);
                return map;
            }

            参数p1=success
            返回 {"p1":"success"}
    */
}

function jajax2() {
    var reqdata = {
        p1:'success'
    }
    $.ajax({
        url: '/testreq/jsonreq',
        type: 'get',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(reqdata),//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端1
            @RequestMapping("/jsonreq")
            @ResponseBody
            public Map jsonreq(@RequestParam(value = "p1", required = false) String p1) {
                Map map = new HashMap();
                map.put("p1",p1);
                return map;
            }

            后端2
            @RequestMapping("/jsonreq2")
            @ResponseBody
            public Map jsonreq2(@RequestBody String p1) {
                Map map = new HashMap();
                map.put("p1",p1);
                return map;
            }

            参数 {%22p1%22:%22success%22}
            返回 400 (Bad Request)
    */
}

function jajax3() {
    var reqdata = {
        p1:'success'
    }
    $.ajax({
        url: '/testreq/jsonreq3',
        type: 'post',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: reqdata,//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping(value = "/jsonreq3", method = RequestMethod.POST)
            @ResponseBody
            public Map jsonreq3(@RequestBody String p1) {
                Map map = new HashMap();
                map.put("p1",p1);
                return map;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {"p1":"success"}
            返回 {"p1":"{\"p1\":\"success\"}"}
            ===
            前端 data:reqdata
            参数 p1=success
            返回 {"p1":"p1=success"}

    */
}

function jajax4() {
    var reqdata = {
        p1:'success'
    }
    $.ajax({
        url: '/testreq/jsonreq4',
        type: 'post',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(reqdata),//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping(value = "/jsonreq4", method = RequestMethod.POST)
            @ResponseBody
            public Map jsonreq4(@RequestParam Map<String, String> params) {
                return params;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {"p1":"success"}
            返回 {}
            ===
            前端 data:reqdata
            参数 p1=success
            返回 {}

    */
}

function jajax5() {
    var reqdata = {
        p1:'success'
    }
    $.ajax({
        url: '/testreq/jsonreq5',
        type: 'get',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(reqdata),//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping("/jsonreq5")
            @ResponseBody
            public Map jsonreq5(@RequestParam Map<String, String> params) {
                return params;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {%22p1%22:%22success%22}
            返回 400 Bad Request
            ===
            前端 data:reqdata
            参数 p1=success
            返回 {"p1":"success"}

    */
}

function jajax6() {
    var reqdata = {
        p1:'success',
        p2:'ok'
    }
    $.ajax({
        url: '/testreq/jsonreq6',
        type: 'get',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(reqdata),//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping("/jsonreq6")
            @ResponseBody
            public Map jsonreq6(@RequestBody Map<String, String> params) {
                return params;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {%22p1%22:%22success%22,%22p2%22:%22ok%22}
            返回 400 Bad Request
            ===
            前端 data:reqdata
            参数 p1=success&p2=ok
            返回 400 Bad Request

    */
}

function jajax7() {
    var reqdata = {
        p1:'success',
        p2:'ok'
    }
    $.ajax({
        url: '/testreq/jsonreq7',
        type: 'post',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: reqdata,//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping(value = "/jsonreq7", method = RequestMethod.POST)
            @ResponseBody
            public Map jsonreq7(@RequestBody Map<String, String> params) {
                return params;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {"p1":"success","p2":"ok"}
            返回 {"p1":"success","p2":"ok"}
            ===
            前端 data:reqdata
            参数 p1=success&p2=ok
            返回 400 Bad Request

    */
}


function jajax8() {
    var reqdata = {
        p1:'success',
        p2:[1,2,3],
        p3:['1','2','3']
    }
    $.ajax({
        url: '/testreq/jsonreq8',
        type: 'get',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: reqdata,//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping(value = "/jsonreq8", method = RequestMethod.GET)
            @ResponseBody
            public Map jsonreq8(@RequestParam Map<String, String> params) {
                return params;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {"p1":"success","p2":[1,2,3],"p3":["1","2","3"]}:
            返回 400 Bad Request
            ===
            前端 data:reqdata
            p1: success
            p2[]: 1
            p2[]: 2
            p2[]: 3
            p3[]: 1
            p3[]: 2
            p3[]: 3
            参数 p1=success&p2%5B%5D=1&p2%5B%5D=2&p2%5B%5D=3&p3%5B%5D=1&p3%5B%5D=2&p3%5B%5D=3
            返回 {"p1":"success","p2[]":"1","p3[]":"1"}

            //改后
            @RequestMapping(value = "/jsonreq8", method = RequestMethod.GET)
            @ResponseBody
            public Map jsonreq8(
                @RequestParam(value="p1", required=false,defaultValue="") String p1,
                @RequestParam(value="p2[]", required=false,defaultValue="") String p2,
                @RequestParam(value="p3[]", required=false,defaultValue="") String p3
            ) {
                Map map = new HashMap();
                map.put("p1",p1);
                map.put("p2",p2);
                map.put("p3",p3);
                return map;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {"p1":"success","p2":[1,2,3],"p3":["1","2","3"]}:
            返回 400 Bad Request
            ===SUCCESS
            前端 data:reqdata
            p1: success
            p2[]: 1
            p2[]: 2
            p2[]: 3
            p3[]: 1
            p3[]: 2
            p3[]: 3
            参数 p1=success&p2%5B%5D=1&p2%5B%5D=2&p2%5B%5D=3&p3%5B%5D=1&p3%5B%5D=2&p3%5B%5D=3
            返回 {"p1":"success","p2":"1,2,3","p3":"1,2,3"}
    */
}


function jajax9() {
    var reqdata = {
        p1: 'success',
        p2: [1, 2, 3],
        p3: ['1', '2', '3']
    }
    $.ajax({
        url: '/testreq/jsonreq9',
        type: 'post',//请求方式，get或post
        async: true,//如果async设置为：true,则不会等待ajax请求返回的结果，会直接执行ajax后面的语句,，默认为true异步
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(reqdata),//JSON.stringify(reqdata)
        success: function (response, textStatus, jqXHR) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            var errInfo = {
                XMLHttpRequest: XMLHttpRequest,
                textStatus: textStatus,
                errorThrown: errorThrown,
                success: false
            }
            console.log(errInfo);
        }
    });
    /*
        测试：
            后端
            @RequestMapping(value = "/jsonreq9", method = RequestMethod.POST)
            @ResponseBody
            public Map jsonreq7(@RequestBody Map<String, String> params) {
                return params;
            }
            ===
            前端 data:JSON.stringify(reqdata)
            参数 {"p1":"success","p2":[1,2,3],"p3":["1","2","3"]}
            返回 {"p1":"success","p2":[1,2,3],"p3":["1","2","3"]}
            ===
            前端 data:reqdata
            参数 p1=success&p2%5B%5D=1&p2%5B%5D=2&p2%5B%5D=3&p3%5B%5D=1&p3%5B%5D=2&p3%5B%5D=3
            返回 400 Bad Request

    */
}

转载于:https://my.oschina.net/u/3005325/blog/2252449

weixin_34343308
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringMVC中使用Ajax（带效果图）
weixin_45802810的博客
07-20 1513
Ajax介绍 Ajax即异步的 JavaScript 和 XML，是一种无需重新加载整个网页的情况下，能够更新部分模块的网页技术。使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。 Ajax应用场景 注册时，输入用户名自动检测用户是否已经存在； 登陆时，提示用户名密码错误； 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除…… Ajax工具类 Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向
springmvc+ajax上传例子
12-07
在IT行业中，SpringMVC和Ajax是两种广泛使用的技术，它们在构建现代Web应用程序时起着至关重要的作用。本教程将深入探讨如何结合SpringMVC和Ajax实现文件上传功能。 首先，SpringMVC是Spring框架的一部分，它是一个...
SpringMVC AJAX使用
qq_43560701的博客
09-05 623
SpringMVC AJAX使用 之前在分析 SMBMS 项目的时候稍微了解过其中的 AJAX 的作用和用法，现在学习了 SpringMVC，就要在 SpringMVC 中使用一下 AJAX。本节创建 SpringMCV-08-AJAX 项目学习 AJAX 的使用。 1. 回顾AJAX AJAX（ Asynchronous Javascript And XML，即异步 JavaScript 和 XML ）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 AJAX 不是新的编程语言，而是用于创建
springmvc中ajax,springmvc中ajax处理
weixin_33328904的博客
08-05 416
1.使用HttpServletResponse处理--不需要配置解析器@Controllerpublic class AjaxController {@RequestMapping("/ajax")public void ajax(String name,HttpServletResponse resp) throws IOException{if("123".equals(name)){resp...
springmvc和ajax注册验证,怎么用springmvc处理form表单的ajax验证
weixin_30210749的博客
08-05 173
满意答案gdfu56282015.10.10采纳率：45%等级：12已帮助：74589人在controller进行相应映射，我给你几个简单例子，你看看参考吧。@RequestMapping(value = "/fan/page.html", method = RequestMethod.POST)@ResponseBodypublic Map pageOfLoans(@RequestPar...
SpringMVC Ajax例子
pingdouble的专栏
10-13 617
SpringMVC Ajax例子
springmvc实现ajax上传例子
axe的专栏
12-07 496
上传图片的方式 传统上传功能:缺点很明显,需要用到form表单,并且提交会伴随页面刷新,比较难用.ajax异步上传:可使用json数据传输,无需form表单,只要一个button按钮即可,页面不会刷新. ajax异步上传方法 这里分为两种: 选择图片后,点击按钮上传选择图片后,立即上传,无需点击上传按钮 注:本文的demo分别实现了这两
springmvc 下拉框 ajax,SpringMVC之ajax+select下拉框交互常用方式
weixin_30647489的博客
08-05 434
Insert title here//ajax+select三种常用交互方式window.onload=function(){test();}function test(){alert("执行");var start = 0;var size=100;var headNo = "111111";$.ajax({type : "post",url : "/ssm_pms/admin_group/li...
SpringMVC处理Ajax请求及处理和响应json格式的数据
qq_47637405的博客
10-01 1618
首先在maven工程里创建新的module（其他方式均可），然后在pom文件中导入依赖，在其中包括我们上文所写到的jackson的依赖，然后配置web里的web.xml编码过滤器、处理请求方式过滤器以及SpringMVC的前端控制器。c>在处理请求的控制器方法的形参位置，直接设置json格式的请求参数要转换的Java类型的形参,使用@RequestBody注解标识即可。method:"", //请求方式（以name=value&name=value的方式发送的请求参数，a>导入Jackson的依赖。
SpringMVC处理ajax请求
weixin_46580576的博客
12-08 164
ajax发送的异步请求json是一种与语言无关的数据交换的格式，使用Json的格式与解析方便的可以表示一个对象信息json有两种格式：①对象格式：{“key1”:obj,“key2”:obj,“key3”:obj…}②数组/集合格式：[obj,obj,obj…]。
springmvc接收ajax请求注意事项
12-19
SpringMVC 框架在处理 Ajax 请求时需要注意一些重要的配置和设置，以确保请求的正确处理和数据的正确传输。下面我们将介绍在 SpringMVC 中接收 Ajax 请求的注意事项。 基本数据类型参数传输 在 Ajax 请求中，如果...
SpringMVC+Ajax异步上传图片并显示(源码)
11-08
在本文中，我们将深入探讨如何使用SpringMVC和Ajax实现异步上传图片并实时显示的功能。这个技术组合常用于Web应用开发中，提供流畅的用户体验，避免页面刷新带来的不便。 首先，SpringMVC是Spring框架的一部分，专...
springMVC对ajax支持jar包
11-29
SpringMVC通过其强大的功能和对Ajax的支持，使得开发者可以轻松地构建这样的应用。 Ajax的核心在于创建异步请求，从服务器获取数据并动态更新页面，而无需完全刷新整个页面。在SpringMVC中，这一过程可以通过使用...
使用springmvc整合ajax请求demo代码示例
02-28
在现代Web应用开发中，Spring MVC和Ajax是两个非常关键的技术。Spring MVC作为一个强大的MVC框架，用于构建后端服务，而Ajax则是一种使前端页面实现异步更新的关键技术。本示例将深入探讨如何在Spring MVC项目中整合...
使用hutool工具判断字符串是否全部是字母(包括大小写)，java判断字符串是否全部是字母(包括大小写)
最新发布
qq_43700885的博客
07-29 312
1.导入hutool的maven依赖。2.复制一下代码执行。
golang 接口
m0_70982551的博客
07-24 1108
接口定义了一组方法，这些方法没有具体的实现。接口类型的变量可以存储任何实现了这些方法的类型的值。// 更多方法...在Go语言中，接口值是指存储了实现某个接口的具体类型值的变量。接口值由两部分组成：1.动态类型：这是接口值当前存储的实际类型。2.动态值：这是实际存储的值，该值必须实现了接口中定义的所有方法。
java判断邮箱地址是否正确，使用hutool工具判断邮箱地址是否正确
qq_43700885的博客
07-29 147
1.导入hutool的maven依赖。2.直接复制一下代码运行。
Swagger使用Map接受参数时，页面如何显示具体参数及说
a1058926697的博客
07-26 590
后端使用Map接受参数，要求在swagger页面上显示具体的参数名称、类型及说明。当Map接受参数数量少时，可以使用Swagger自带的注解。自定义注解 @ApiGlobalModel。编写处理注解对应的插件。
springmvc和ajax相互调用
03-16
Spring MVC和Ajax可以相互调用，通过Ajax可以异步地向Spring MVC控制器发送请求，Spring MVC控制器可以处理请求并返回数据，然后Ajax可以将返回的数据更新到页面上，实现无刷新的交互效果。在Spring MVC中，可以使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值