Servlet与jsp ajax

创建jsp界面和servlet

servlet界面
在doGet方法里写代码

@WebServlet("/ajaxServlet")
public class ajax extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		System.out.println("+++++++===");//判断是否进入servlet
		//判断比较账号，密码，这里是写死的，一般是比较从数据库传来的数值
		if(request.getParameter("username").equals("hardy")  && request.getParameter("password").equals("123")) {//判断用户的账号密码，正确返回0
			response.getWriter().write("0");//传值“0”到jsp界面
		}else{
			response.getWriter().write("1");//用户的账号密码错误，传值“1”到jsp界面
		}
	
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

jsp界面

格式

$.get(
	"里面放URL",
	{键值对},
	function(date){
	获取从后台传来的值
	},
	"格式，可以是HTML或者json等"
)

代码
在script里有两种方法，其实差不多
方法一：

<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#sub").click(function(){//点击触发
			alert("欢迎登陆")
			$.get("../ajaxServlet"//URL，需要返回上一级
					,{"username":$("#username").val(),//id选择器
					"password":$("#password").val()},
					function(date){//接收后台发送的数据
						if(date=="0"){
							alert("登录成功")
							//js界面跳转
						}else if(date=="1"){
							alert("登录失败")
							$("label").html("用户名或密码错误")
							$("label").css("color","red")
						}
					},
					"html")
		})
	})
	
</script>

方法二：

$(document).ready(function(){
		$("#sub").click(function(){
			$.ajax({
			    type:"get",
			    url:"../ajaxServlet",
			    data:{"username":$("#username").val(),
					"password":$("#password").val()},
			    dataType:"html",       
			    success: function(data){
			    	if(data=="0"){
						alert("登录成功")
						//js界面跳转
					}else if(data=="1"){
						alert("登录失败")
						$("label").html("用户名或密码错误")
						$("label").css("color","red")
					}
			    }
			})
		})
		
	})

<form action="#">
	用户名<input type="text" id="username"> <label></label> <br>
	密码<input type="password" id="password">
	<input type="submit" id="sub">
</form>

有一个坑的地方，如果你把jsp放在一个文件夹下面

你就需要在URL返回上一级，否则会找不到servlet

运行成功截图：