异步jquery Get Post方式提交数据 load 加载数据

最新推荐文章于 2020-12-22 12:04:21 发布

shamusoft

最新推荐文章于 2020-12-22 12:04:21 发布

阅读量169

点赞数

分类专栏： jquery 文章标签： jQuery JSP JavaScript CSS HTML ViewUI

本文链接：https://blog.csdn.net/shamusoft/article/details/83941467

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.3.1.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
		<form action="" name="form1" id="form1">
			<input type="text" name="username" id="username" value="zhang"><br>
			<input type="text" name="psw" id="psw" value="99999"><br>
	        <input type="button" id="b1" value="登陆">
		</form>
		
		<div id="one">
		</div>
		
	</body>
<script language="JavaScript">
  $().ready(function(){
  	$("#b1").click(function(){
//  	  /*
//  	   * $.get("get.jsp",jsonObj,function(data,textStatus)
//  	   *  * 通过远程 HTTP GET 请求载入信息
//  	   *  * 参数1:请求的路径
//  	   *  * 参数2:发送到服务器的数据格式:{key1:value2,key2:value2}
//  	   *  * 参数3:function(data,textStatus)
//  	   *         * data:服务器返回的数据
//	   *   	     * textStatus:通信的状态 其值可能为: succuss, error, notmodify, timeout 
//	   *  
//	   *  * 方法的返回值是XMLHttpRequest对象 
//  	   */
//	  var jsonObj={
//			  	  username:$("#username").val(),
//				  psw:$("#psw").val()
//			  }
//	  
//	  $.get("get.jsp",jsonObj,function(data,textStatus){
//	  	     alert(data);  
//		   $("#one").text(data); 
//	  });
/******************************************************************************************************/	  
//  	  /*
//  	   * $.post("get.jsp",jsonObj,function(data,textStatus)
//  	   *  * 通过远程 HTTP post 请求载入信息
//  	   *  * 参数1:请求的路径
//  	   *  * 参数2:发送到服务器的数据格式:{key1:value2,key2:value2}
//  	   *  * 参数3:function(data,textStatus)
//  	   *         * data:服务器返回的数据
//	   *   	     * textStatus:通信的状态 其值可能为: succuss, error, notmodify, timeout 
//	   *  
//	   *  * 方法的返回值是XMLHttpRequest对象 
//  	   */
//	  var jsonObj={
//			  	  username:$("#username").val(),
//				  psw:$("#psw").val()
//			  }
//	  
//	  $.post("get.jsp",jsonObj,function(data,textStatus){
//	  	     alert(data);  
//		   $("#one").text(data); 
//	  });

/******************************************************************************************************/
	  $.post("get.jsp",$("#form1").serialize(),function(data,textStatus){
	  	     alert(data);  
		   $("#one").text(data); 
	  });
	
  });		
});	
</script>
   
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>ddd</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script language="JavaScript" src="../js/jquery-1.4.2.js">
        </script>
        <style type="text/css">
            div, span {
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Roman;
            }
            
            div.mini {
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family: Roman;
            }
            
            div.visible {
                display: none;
            }
        </style>
        <!--引入jquery的js库-->
    </head>
    <body>
        <form action="" name="form1" id="form1">
            <input type="text" name="username" id="username" value="zhang">
            <br>
            <input type="text" name="psw" id="psw" value="99999">
            <br>
            <input type="button" id="b1" value="登陆">
        </form>
        
		<div id="one">
        </div>
		
    </body>
    <script language="JavaScript">
      $().ready(function(){
	  	   $("#b1").click(function(){
		   	  /*
		   	   * $("#one").load("load01.jsp",function(data,textStatus,xmlHttpRequest)
		   	   *   * 第一个参数:请求的路径
		   	   *   * 第二个参数:发送到服务器的数据:格式{key1:value1,key2:value2}
		   	   *   * 第三个参数:回调函数 function(data,textStatus,xmlHttpRequest)
		   	   *         * data:服务器返回的数据
		   	   *         * textStatus:通信的状态 其值可能为: succuss, error, notmodify, timeout 
		   	   *         * xmlHttpRequest:对象
		   	   *         
		   	   *   * 如果没有传递参数 使用get 否则使用post 
		   	   *        
		   	   */
			  
			  var jsonObj={
			  	  username:$("#username").val(),
				  psw:$("#psw").val()
			  }
			  
		   	  $("#one").load("load01.jsp h1,h2",jsonObj,function(data,textStatus,xmlHttpRequest){
			  	  alert(data);
				  //alert(textStatus);
			  });
		   });
	  });
    </script>
</html>