这是用jquery进行数据交互
-
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.0.js"></script>
-
<script type="text/javascript">
-
$(function(){
-
$("#inp1").blur(function(){
-
var name=$(this).val();
-
$.ajax({
-
url:"${pageContext.request.contextPath}/demo",
-
data:{"uname":name,"upwd":"jack123","age":12},
-
cache:"false",
-
async:"true",
-
dataType:"json",
-
type:"post",
-
success:function(data){
-
-
if(data.flag=="1"){
-
$("#sp").html("用户名存在");
-
}else{
-
$("#sp").html("");
-
}
-
},
-
error:function(){
-
alert("服务器端异常");
-
}
-
-
-
-
});
-
-
-
-
});
-
-
-
-
-
})
-
-
-
-
</script>
-
-
-
<title>Insert title here</title>
-
</head>
-
<body>
-
<input type="text" value="" id="inp1"><span id="sp"></span>
-
</body>
-
</html>
jquery封装的ajax 进行数据交互, 实现异步加载
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.0.js"></script>
<script type="text/javascript">
var json={
"flag":"1"
};
//alert(json.flag);
$(function(){
//$.get(url,data,success(data,status,xhr),dataType)
$("#btn").click(function(){
$.get(
"${pageContext.request.contextPath}/demo",
{"uname":"jack","upwd":"123","age":12},
function(data,status){
//var data={"flag":"1"}
alert(data);
if(data.flag=="1"){
$("#sp").html("用户名已经被占用").css("color","red");
}else{
$("#sp").html("用户名可以使用").css("color","green");
}
},
"json"
);
})
});
</script>
</head>
<body>
<input type="button" id="btn" value="$.get异步请求服务器"><span id="sp">
</body>
本文由:http://www.267774.com整理发布。
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/31512205/viewspace-2153573/
,如需转载,请注明出处,否则将追究法律责任。