html的ajax请求

最新推荐文章于 2024-10-11 15:28:44 发布

Brrby

最新推荐文章于 2024-10-11 15:28:44 发布

阅读量2.1w

点赞数 9

分类专栏： java 文章标签： java jquery ajax js

本文链接：https://blog.csdn.net/qq_30433703/article/details/108578462

版权

java 专栏收录该内容

62 篇文章 2 订阅

订阅专栏

页面中ajax发起请求，controller接收数据并处理

这次ajax的测试以访问html的方式配置

在这里插入图片描述

配置yml文件：

然后在 src/main/webapp下创建一个html页面

创建controller：

运行项目就可以访问到index.html：

引入jquery：

修改index.html页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-1.8.3.js"></script>
<script>
	$(function(){
		$("#s").click(function(){
			var ins=$("#ins").val();
			$.ajax({
  	  			url:"/r",//要请求的服务器url
  	  			data:{ins:ins},//第一个name对应的是后端request.getParameter("name")的name、第二个name对应的是此js中的var name = $("#name").val();的name
  	  			async:true,//是否是异步请求
  	  			cache:false,//是否缓存结果
  	  			type:"POST",//请求方式
  	  			dataType:"text",//服务器返回什么类型数据 text xml javascript json(javascript对象)
  	  			success:function(result){//函数会在服务器执行成功后执行，result就是服务器返回结果
  	  				console.log(result);	  
  	  				$("#re").html(result);			
  	  			},
  	  			error:function(jqXHR, textStatus, errorThrown) {
  	  	   	 		
  	  	    	}
			});
		});
	});
</script>
</head>
<body>
<h1>我是html页面</h1>

<input type="text" id="ins" />

<button id="s">发起ajax</button>
<span id="re"></span>
</body>
</html>

然后再写一个controller来接收：

	//因为页面的实现是想点击按钮后就发起ajax请求传入input输入的内容，所以这里的方法有个String类型的ins参数，
	//要和发起ajax方法里的data的:前的名字一样
	//而@ResponseBody是表示这个方法是返回的参数类型是json格式
	@RequestMapping("/r")
	@ResponseBody
	public String r(String ins) {
		String s="";
		if(ins.equals("")) {
			s="输入不能为空";
		}else {
			s=ins;
		}
		return s;
	}

在这里插入图片描述
运行测试：