ajax前后台数据简单交互（ssm）

最新推荐文章于 2021-12-22 13:38:07 发布

原创最新推荐文章于 2021-12-22 13:38:07 发布 · 1.2w 阅读

43 ·

CC 4.0 BY-SA版权

文章标签：

#ajxa #Spring mvc

ajax 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一个使用AJAX实现的简单前后端交互案例。通过示例代码展示了如何利用jQuery发起POST请求，并验证用户输入的有效性。同时介绍了两种在后端接收数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次开始写博客主要是为了自己得积累和刚刚入行初学者方便！有什么不好得地方请多多指教！

好了那么咱们开始来讲讲ajxa简单得前后端交互

首先咱们先把需要得架包导入！

https://pan.baidu.com/s/1p9J6tbMF9uLp9RzQXDAC7g

https://pan.baidu.com/s/1NVuxYB2rN_8wcQ9B_Wb47Q（js的为了一些刚刚入门得方便　＝　＝对啦ｊｓ路径错了会没有效果！新手谨记）

闲话不多少了直接贴代码啦！！

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ZERO</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
	
	$(document).ready(function(){
		$("#regist").bind('click',register);
	});
	
	function register(){
		var name = $("#name").attr('value');
		var password = $("#password").attr('value');
		var repassword = $("#repassword").attr('value');
		if(validate(name,password,repassword)){
			$.ajax({
				url: "ajaxdemo",  
				dataType : "json",  
				type: "post",  
				data: {"name":name,"password":password},
				success:function(data){
					alert(data.demo); 
				},
				error: function() {
					alert("ajax执行失败"); 
				}
		    });
		}
	}
	
	/*   验证方法         */
	function validate(name,password,repassword){
		if(name==null || name==''){ 
			alert('用户名不能为空！');
			$("#name").focus();
			
			return false;
		}
		if(password==null || password==''){
			alert('密码不能为空！');
			$("#password").focus();
			
			return false;
		}
		if(repassword==null || repassword==''){
			alert('确认密码不能为空！');
			$("#repassword").focus();
			
			return false;
		}else if(password != repassword){
			alert('两次密码输入不一致！');
			$("#repassword").focus();
			
			return false;
		}
		
		return true;
	}
</script>
<style type="text/css">
	.demo {width:250px;height:40px;display:none; }
</style>
<body>
	<div id="content">
		<table>
			<tr>
				<td>用 户 名：</td>
				<td>
					<input  type="text" name="name" id="name" />
				</td>
			</tr>
			<tr>
				<td>密　　码：</td>
				<td>
					<input type="password" name="password" id="password"/>
				</td>
			</tr>				
			<tr>
				<td>确认密码：</td>
				<td>
					<input type="password" name="repassword" id="repassword"/>
				</td>
			</tr>				
			<tr>
				<td colspan="2" align="CENTER">
					<BR><input type="button" id="regist" value="注册"/>
				</td>
			</tr>	
		</table>
	</div>
	
</body>
</html>

这里就是所有得jsp代码！

代码给全点也方便看点！

java得代码我就贴用到得部分！因为控制层内部东西有点多！

                @ResponseBody
		@RequestMapping(value = "ajaxdemo" , method = RequestMethod.POST)
		public  JSONObject  ajaxdemo(HttpServletRequest req){
		//	System.out.println(name);
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("demo", "demo");
		System.out.println("-----");
		
		String parameter = req.getParameter("name");
		System.out.println(parameter);
		String parameter2 = req.getParameter("password");
		System.out.println(parameter2);

		
	
			
			
			return jsonObject;
			
		}

这是用Request去接收数据还有一种接收　用

@RequestBody

jsp页面还是可以用那个不会出问题只不过接收得数据是拼接起来得

	@ResponseBody
		@RequestMapping(value = "ajaxdemo" , method = RequestMethod.POST)
		public  JSONObject  ajaxdemo(@RequestBody String req){
			System.out.println(req);
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("demo", "demo");
		System.out.println("-----");
		
//		String parameter = req.getParameter("name");
//		System.out.println(parameter);
//		String parameter2 = req.getParameter("password");
//		System.out.println(parameter2);

		
	
		
			
			return jsonObject;
			
		}

以上！就是简单得ajax得简单得交互！！欢迎大家给我指出！