ajax如何实现前后台简单的数据交互

来源：动视网责编：小采时间：2020-11-27 19:58:41

ajax如何实现前后台简单的数据交互

ajax如何实现前后台简单的数据交互:本文主要和大家讲解ajax如何实现前后台简单的数据交互，主要以代码的形式和大家分享，希望能帮助到大家。话不多说，直接上代码：<%@ page language="java" contentType="text/html; charset=UTF-8" pa

推荐度：

点击下载本文 文档为doc格式

导读ajax如何实现前后台简单的数据交互:本文主要和大家讲解ajax如何实现前后台简单的数据交互，主要以代码的形式和大家分享，希望能帮助到大家。话不多说，直接上代码：<%@ page language="java" contentType="text/html; charset=UTF-8" pa

本文主要和大家讲解ajax如何实现前后台简单的数据交互，主要以代码的形式和大家分享，希望能帮助到大家。

话不多说，直接上代码：

<%@ 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>
	<p 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>
	</p>
	
</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如何实现前后台简单的数据交互

推荐度：

点击下载本文 文档为doc格式

标签：的数据数据实现

热门焦点

ajax如何实现前后台简单的数据交互

ajax如何实现前后台简单的数据交互

ajax如何实现前后台简单的数据交互

最新推荐

猜你喜欢

热门推荐