您的位置：首页 > Web前端 > JQuery

Ajax 的jquery与后台交互实现无刷新效果

2012-06-21 13:09 246 查看

servlet代码：
publicvoid doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {
response.setContentType("text/html");

PrintWriter out = response.getWriter();

String userName = request.getParameter("userName");

//查询数据库得到这个userName存不存在，现在这里就不进数据库了

String str = "1,2,3" ;

if(userName.equals("123")){

System.out.println("进入");

out.print(str);

}else{

System.out.println("错误信息");

out.print("0");

}

}
jsp代码
<scripttype="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

function checkUserNames(){

var userName =document.getElementById("userName").value;

if(userName==""){

$('#checkUserName').html("<font color='green'>用户名不能为空</font>");

return false;

}else{

$.ajax({

type:"POST",

<Ahref='http://hi.baidu.com/tian2531627/creat/blog/"/checkUserName'>url:"<%=request.getContextPath()%>/checkUserName",

data:{userName:userName},

aysnc:"false",

success:function(data){

if(data == 0){

$('#checkUserName').html("<fontcolor='green'>该用户未注册</font>");

}else{

$('#checkUserName').html("<fontcolor='green'>用户名正确</font>");

alert(data) ;

var s=data.split(",");

for(var i = 0 ; i < s.length ; i ++){

document.getElementById("test1").value = s[0];

document.getElementById("test2").value = s[1];

document.getElementById("test3").value = s[2];

}

}

}

})

}

}

</script>

<body>

<form name="myform" id="myform"action="#" method="post">

<input id="userName" type="text"name="userName">

<span id="checkUserName"></span>

<input id="test1" type="text"name="test1">

<input id="test2" type="text"name="test2">

<input id="test3" type="text"name="test3">
<inputtype="button" name="button" value="Ajax"

onclick="checkUserNames();">

</form>

</body>

</html>
web.xml代码略
实现与与后台交互无刷新效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航