时间：2021-07-01 10:21:17 帮助过：23人阅读
话不多说，直接上代码：
<%@ 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如何实现前后台简单的数据交互的详细内容，更多请关注Gxl网其它相关文章！