`

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

jQueryJSPJavaScriptCSSHTML 
阅读更多 
<!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>

 

分享到：
| 日期插件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery中Ajax的get、post等方法详解

    $.get()方法使用GET方式来进行异步请求。结构为：$.get(url [, data] [, callback] [, type]) $.get()方法参数解释如下: 参数名称 类型 说明 url String 请求的HTML页的URL地址 data(可选) Object 发送至...

    jQuery权威指南-源代码

    6.1.5　jQuery中异步加载XML文档/168 6.2　请求服务器数据/170 6.2.1　$.get()请求数据/170 6.2.2　$.post()请求数据/172 6.2.3　serialize()序列化表单/175 6.3　$.ajax()方法/177 6.3.1　$.ajax()的基本概念/177 ...

    JQuery权威指南源代码

    get实现异步获取xml文档数据 $.get发送请求 $.post发送请求 serialize()序列化表单 $.ajax()方法发送请求 第7章 validate验证插件 form表单插件 cookie插件 autocomplete插件 notesforlightbox插件 ...

    jQuery Ajax之$.get()方法和$.post()方法

    注意：$.get()和$.post()方法是jQuery中的全局函数。前面讲到的load()方式是对jQuery对象进行操作的。 1、 $.get()方法 　$.get()方法使用GET方式来进行异步请求。 　它的语法结构为： 　$.get( url [, data] [, ...

    jquery中ajax常用的方法,jQuery ajax框架常用方法总结.docx

    ajax() 方法是 jQuery 中最强大的 AJAX 方法，它可以发送 GET、POST、PUT、DELETE 等多种类型的请求。该方法的语法为 `$.ajax(options)`,其中 `options` 是一个对象，它可以包含多种参数。 常见的参数包括： * url...

    jquery电子文档chm

    type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 url (String) : (默认: 当前页地址) 发送请求的地址。...

    jquery-1.1.3 效率提高800%

    type("GET") 数据类型: String 请求的类型 ("POST" 或 "GET"), 默认是 "GET"。注意：其他的HTTP请求方法，如PUT和DELETE，在这里也可以使用，当时它们并不被所有的浏览器支持。 url(The current page) ...

    jquery插件使用方法大全

    可以用来添加不向外部公开的方法，或者对jQuery的某些方法进行重新定义以提供新功能，或者提供更好的封装、避免名称空间冲突。当然，也可以用来开发插件，但Resig强烈建议在开发插件之前，先考虑jQuery UI widget...

    jQuery权威指南366页完整版pdf和源码打包

    6.1.2　jquery中的load（）方法　6.1.3　jquery中的全局函数getjson（）　6.1.4　jquery中的全局函数getscript（）　6.1.5　jquery中异步加载xml文档　6.2　请求服务器数据　6.2.1　$.get（）请求数据　6.2.2　$....

    jQuery详细教程

    jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict()，帮助您使用...

    用Jquery实现多级下拉框无刷新的联动

    最开始准备用.NET只带的AJAX实现，发现达不到想要的效果。后来采取JQuery中AJAX功能，通过异步调用C#写的web...还可以使用$.post()和$.get()来实现post或get方式的AJAX调用，对于复杂的情况，还可以使用AJAX（）方法。

    Java面试宝典2020修订版V1.0.1.doc

    14、jquery中的$.get和$.post请求区别？ 27 15、jquery中如何操作样式的？ 28 16、如何设置和获取HTML和文本的值？ 28 17、Jquery能做些什么？ 28 18、在ajax中data主要有哪几种？ 28 19、jQuery中ajax由几部分组成...

Magicbox
Global site tag (gtag.js) - Google Analytics