创建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
运行成功截图: