ajax异步加载实现局部刷新

17-07-01 来源：[db:作者]

收藏我要投稿

ajax异步加载实现局部刷新，这是用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>

点击复制链接与好友分享!回本站首页