一、ajax的基本样式

1、基础样式

$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式(get)
//data: "username=jack&age=23",//请求参数
dataType:"text"//设置接受到的响应数据的格式
data:{"username":"jack","age":23},
success:function (data) {
	 alert(data);
	 },//响应成功后的回调函数
	  error:function () {
	 alert("出错啦...")
	}//表示如果请求响应出现错误，会执行的回调函数
	  });

2、变式 $.get(); / $.post();

$.get(url, [data], [callback], [type])
//url:路径地址
//data:传的数据
//callback:回调函数(请求返回值时调用，一般用于判断，给出相应的提示信息)
//type:相应结果数据类型和callback同时使用

post请求与get请求格式相同

二、实例与应用

1、前后端数据交互（简单登录）

1、前端页面代码

$(function(){
		$("#login").click(function(){
			 var userFakeName=$("#userFakeName").val();
		        var password=$("#password").val();
		       // var newWin = window.open('index.jsp');
		        if (userFakeName!=null&&password!=null) {
					$.post("${pageContext.request.contextPath}/homelogin.action",
					{"userFakeName":userFakeName,"password":password},
					function(answer){
						if (answer==1) {
							//alert('22222');
							window.location.href="index.jsp";
							return false;
						}else if(answer ==0){
							alert("密码错误");
							location.href="login.jsp";
							return false;
						}else if(answer==2 )
							alert("用户名不存在");
							location.href="login.jsp";
							return false;
					});
				}
		});
	});
===================================================
<form>
	<input id="userFakeName" type="text" name="userFakeName" placeholder="用户昵称" onblur="check()" value=""/>
	<input id="password"  type="password" name="password"  placeholder="密码" />
	<input id="login" type="button" value="登&ensp;录" />
<form>

2、后台代码

@RequestMapping("homelogin")
	@ResponseBody
	public void login(HttpServletRequest request, HttpServletResponse response, HttpSession session)
			throws IOException {
		response.setCharacterEncoding("utf-8");
		String userFakeName = request.getParameter("userFakeName");
		String password = request.getParameter("password");
		//这是从数据库通过用户名调取用户信息，查看数据库有没有这个用户
		User user = userService.getUserByUserFakeName(userFakeName);
		//answer是要返回到前端页面的数据
		int answer=0;
		if (user==null) {
			answer = 2;
			System.out.println("用户昵称不存在");
		}else if (userFakeName.equals(user.getUserFakeName())) {
			if (user.getUserPassword().equals(password)) {
				answer = 1;
				System.out.println("登录成功");
			} else {
				answer = 0;
				System.out.println("密码错误");
			}
		} 
		//将后台数据结果返回到前端页面
		PrintWriter out = response.getWriter();
		out.print(answer);
		out.flush();
	}

实现效果：
在这里插入图片描述

2、本页面的验证

下面的三个功能一般常用于注册用户的过程中
（1）input不能为空
在你需要检测的input框中加入方法名{ οnblur=“check()”}

function check() {
		var name = $("#userFakeName").val();
		if (name==null||name=="") {
			alert("用户名不能为空");
			return;
		}
	}

（2）查重验证
在你需要检测的input框中加入方法名{ οnblur=“checkFake()” }

function checkFake(){
	var userFakeName=$("input[name='userFakeName']").val();
	$.post('${pageContext.request.contextPath}/checkFakeName.action',{"userFakeName":userFakeName},function(data){
		if (data==1) {
			$("span[name='userFakeName']").html("<font color='red'>昵称已存在</font>");
			$("input[name='userFakeName']").val("");
			return false;
		}else{
			$("span[name='userFakeName']").html("<font color='red'></font>");
		}
	});	
}

（3）输入密码一致
方法名的位置一般放在第二次输入密码的input中{ οnblur=“checkPassword()”}

function checkPassword() {
	var pwd = $("input[name='password']").val();
	var cpwd = $("input[name='password_check']").val();
	if (pwd != cpwd) {
		$("#warning").html("<font color='red'>密码不一致</font>");
		//alert("两次密码不一致!");
		$("input[name='password']").val("");
		$("input[name='password_check']").val("");
		return false;
	}else{
		$("#warning").html("<font color='red'></font>");
	}
}