ajax非同步載入 實現區域性重新整理
阿新 • • 發佈：2019-01-06
這是用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"></span>
</body>