JQuery中使用Ajax

最新推荐文章于 2024-05-21 11:30:58 发布
最新推荐文章于 2024-05-21 11:30:58 发布
阅读量217 收藏
点赞数
分类专栏： JQuery Ajax 文章标签： jquery ajax

JQuery 对 Ajax 操作进行了封装

  1. 在 jQuery 中最底层的方法时 $.ajax()
  2. 第二层是 load(), $.get() 和 $.post()
  3. 第三层是 $.getScript() 和 $.getJSON()

load（）方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>load()方法</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/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">
     	$(function(){
			$("#b1").click(function(){
				/*
				 * $(expr).load(url,data,callback)
				 * 	* url:请求路径,绝对路径或相对路径
				 * 	* data:请求参数,格式必须是key/value格式
				 * 	* callback:回调函数,function(data, textStatus, XMLHttpRequest){}
				 * 		* data:代表请求返回内容
				 * 		* textStatus:代表请求状态,值可能为: succuss, error, notmodify, timeout 4 种
				 * 		* XMLHttpRequest对象
				 * 
				 * jQuery中封装Ajax操作
				 * 
				 * load()方法的请求类型:
				 * 	* (默认情况下)在没有向服务器端发送请求数据的时候,load()方法的请求类型就是GET方式
				 * 	* 在向服务器端发送了请求数据的时候，load()方法的请求类型就是POST方法
				 * load()方法的问题:
				 * 	* load()不能自定义请求类型,而是由是否向服务器端发送请求数据
				 * 	* load()不能自定义数据交换格式,只能使用文本(HTML)格式
				 */
				var json = {
					username : $("#username").val(),
					psw : $("#psw").val()
				}
				
				$("#one").load("load.jsp",json,function(data, textStatus, XMLHttpRequest){
					alert(data);
				});
				
			});
		});
    </script>
</html>
load.jsp 
<%@ page language="java" pageEncoding="UTF-8"%>
<%
	System.out.println("connection server success!");
	
	System.out.println(request.getMethod());
	
	System.out.println("username = "+request.getParameter("username"));
	System.out.println("password = "+request.getParameter("psw"));
	
	out.println("helloworld!");
	
%>

$.get() 和 $.post()方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>get()方法和post()方法</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/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">
   $(function(){
   		$("#b1").click(function(){
//			/*
//			 * $.get(url,data,callback,type)
//			 * 	* url:请求路径
//			 * 	* data:请求参数,格式是key/value
//			 * 	* callback:回调函数,function(data, textStatus){}
//			 * 		* data:请求返回的数据内容,可以是HTML代码、XML片段或JSON格式等
//			 * 		* textStatus:请求的状态,其值是success、error、notmodify、timeout等
//			 * 		* 返回值:XMLHttpRequest对象
//			 * 	* type:返回内容格式，xml, html, script, json, text, _default。
//			 * 
//			 * $.get()方法的请求类型一定是GET方式
//			 */
//			var json = {
//				username : $("#username").val(),
//				psw : $("#psw").val()
//			}
//			
//			$.get("getandpost.jsp",json,function(data, textStatus){
//				//直接接收服务器端的响应数据格式为JSON格式
//				console.info(data);
//				
//				//var json = eval("("+data+")");
//				//console.info(json);
//			});
			
			/*
			 * $.post(url,data,callback,type)
			 * 	* url:请求路径
			 * 	* data:请求参数,格式是key/value
			 * 	* callback:回调函数,function(data, textStatus){}
			 * 		* data:请求返回的数据内容,可以是HTML代码、XML片段或JSON格式等
			 * 		* textStatus:请求的状态,其值是success、error、notmodify、timeout等
			 * 		* 返回值:XMLHttpRequest对象
			 * 	* type:返回内容格式，xml, html, script, json, text, _default。
			 * 
			 * $.post()方法的请求类型一定是POST方式
			 */
//			var json = {
//				username : $("#username").val(),
//				psw : $("#psw").val()
//			}
			
			//序列化元素
			var json = $("#form1").serialize();
			
			$.post("getandpost.jsp",json,function(data, textStatus){
				//直接接收服务器端的响应数据格式为JSON格式
				console.info(data);
				
				//var json = eval("("+data+")");
				//console.info(json);
			});
		});
   });
</script>
</html>
getandpost.jsp 
<%@ page language="java" pageEncoding="UTF-8"%>
<%
	System.out.println("conenction server success!");
	
	System.out.println(request.getMethod());
	
	System.out.println("username = "+request.getParameter("username"));
	System.out.println("password = "+request.getParameter("psw"));
	
	//响应文本格式
	//out.println("helloworld!");
	
	//响应XML格式
	//response.setContentType("text/xml");
	//out.println("<china><province name='jilinsheng'></province></china>");
	
	//响应JSON格式:jQuery提供的get()或post()方法时,数据格式为JSON格式时,只能使用第三方工具构建JSON格式的数据内容,不能使用手工方式
	out.println("[{'province':'jilinsheng'},{'province':'liaoningsheng'},{'province':'shandongsheng'}]");
	
%>

$.ajax()方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax()方法</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/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">
   	$(function(){
		$("#b1").click(function(){
			/*
			 * $.ajax(options)
			 * 	* options:(可选)
			 * 		* url:请求路径
			 * 		* type:请求类型
			 * 		* async:表示是否异步
			 * 		* data:发送到服务器端的请求数据,格式是key/value格式
			 * 		* success:表示Ajax异步交互请求成功后,回调函数(接收服务器端的响应)
			 * 			* function(data, textStatus){}
			 * 				* data:请求返回的数据内容
			 * 				* textStatus:表示请求的状态,值有success、error、notmodify、timeout等
			 *		* error:表示Ajax异步交互请求失败后,回调函数
			 			* function(XMLHttpRequest, textStatus, errorThrown){}
			 				* XMLHttpRequest对象
			 				* textStatus:表示请求的状态,值有success、error、notmodify、timeout等
			 				* errorThrown:异常对象
			 * 	* 返回值:XMLHttpRequest对象
			 */
			var json = {
				username : $("#username").val(),
				psw : $("#psw").val()
			}
			
			$.ajax({
				url : "ajax.jsp",
				type : "get",
				async : true,
				data : json,
				success : function(data, textStatus){
					alert(data);
				},
				error : function(XMLHttpRequest, textStatus, errorThrown){
					alert("请求错误啦。。。");
				}
			});
			
		});
	});
</script>
</html>
ajax.jsp 
<%@ page language="java" pageEncoding="UTF-8"%>
<%
	System.out.println(request.getMethod());
	
	System.out.println("connection server success!");
	
	System.out.println("username = "+request.getParameter("username"));
	System.out.println("password = "+request.getParameter("psw"));
	
	out.println("helloworld");
%>

$.getScript() 方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>getScript()方法</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
	<style>
		* { margin:0; padding:0;}
		body { font-size:12px;}
		.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
		.comment h6 { font-weight:700; font-size:14px;}
		.para { margin-top:5px; text-indent:2em;background:#DDD;}
		.block{width:80px;height:80px;background:#DDD;}
	</style>
  </head>
  <body>
	 <br/>
	 <p>
		 <input type="button" id="send" value="加载"/>
	 </p>
	
	<div  class="comment">已有评论：</div>
	 <div id="resText" >
		
	 </div>
  </body>
  <script type="text/javascript">
   $(function(){
        $('#send').click(function() {
			 /*
			  * $.getScript(url,callback)
			  * 	* url:请求路径,可以是绝对路径和相对路径
			  * 	* callback:回调函数
			  */
			 $.getScript('test.js');
        });
   })
  </script>
</html>
test.js 
var comments = [
  {
    "username": "张三",
    "content": "沙发."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
];

  var html = '';
  $.each( comments , function(commentIndex, comment) {
      /*
       * JSON格式中的kye/value格式的调用:
       * 	* json.key
       * 	* json['key']
       */
	  html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
  })

  $('#resText').html(html);

 $.getJSON()方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>getJSON()方法</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
	<style>
		* { margin:0; padding:0;}
		body { font-size:12px;}
		.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
		.comment h6 { font-weight:700; font-size:14px;}
		.para { margin-top:5px; text-indent:2em;background:#DDD;}
		.block{width:80px;height:80px;background:#DDD;}
	</style>
  </head>
  <body>
	 <br/>
	 <p>
		 <input type="button" id="send" value="加载"/>
	 </p>
	
	<div  class="comment">已有评论：</div>
	 <div id="resText" >
		
	 </div>
  </body>
  <script type="text/javascript">
   $(function(){
        $('#send').click(function() {
			 /*
			  * $.getJSON(url,data,callback)
			  * 	* url:请求路径
			  * 		* ".json"文件:专门用来存储符合JSON格式的数据内容,当作一个文本文档
			  * 	* data:请求参数
			  * 	* callback:回调函数,function(data){}
			  * 		 * data:表示请求返回的内容
			  */
			 $.getJSON("test.json",function(data){
			 	$('#resText').empty();
				  var html = '';
				  $.each( data  , function(commentIndex, comment) {
					  html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
				  })
				 $('#resText').html(html);
			 });
       })
   })
  </script>
</html>
test.json 
[
  {
    "username": "张三",
    "content": "沙发."
  },
  {
    "username": "李四",
    "content": "板凳."
  },
  {
    "username": "王五",
    "content": "地板."
  }
]









须佐能乎！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用jQuery实现Ajax
m0_53698336的博客
11-01 6572
Ajax 全称“Asynchronous JavaScript and XML”，译为“异步 JavaScript 和 XML”，程序员们习惯称之为“阿贾克斯”，它并不是一种技术，而是多种技术的综合体，其中包括 JavaScript、XML、JSON、DOM、CSS、HTML 以及最重要的 XMLHttpRequest 对象。通过 Ajax 可以异步从服务器请求数据并将数据更新到网页中，整个过程不需要重载（刷新）整个网页，可以将网页的内容更快的呈现给用户。 这里的异步是指，当程序执行到 Ajax 代码时，将
jquery中ajax中的参数,jquery中的ajax参数
weixin_42109598的博客
08-05 2560
jquery中将ajax封装成了函数，我们使用起来非常方便，jquery会自动根据内容选择post还是get方式提交数据，并且会自动编码，但是要想完全掌握jquery中的ajax，我们必须将它的各个参数记住：1、url strng 发送请求的地址2、type string 请求方式(post或get，默认get)，其他http请求方法，比如：put和delete也可以使用，但只有部...
ajax动态加载数据后的click事件问题
DreamFJ的博客
07-19 6451
问： 为什么ajax加载出来的html,无法用选择器绑定事件,但可以直接在html上使用onclick等事件? 如ajax 加载了<div class="div">div</div> 然后$('.div').click(function(){.....});click操作无效但是如果加载 <div onclick=dofun("prameter")>div</div> dofun 就可以被on
click点击事件触发多次ajax请求解决方案
weixin_42905245的博客
11-27 1160
在项目中遇到点击时间触发了多次ajax请求，解决方案是需要加上unbind(‘click’) unbind()为了清除这个dom之前绑定的事件。 $(document).on('click','#zd',function () { // 加上unbind('click')解决多次触发ajax请求 $(document).unbind('click').on('click','#zd',function () { ...
jquery中ajax常用的方法,jquery中的ajax基本方法
weixin_36340890的博客
08-05 326
jquery.ajax()操作方法让ajax实现非常简单，你可以更专注的去完成相关操作，而非去研究ajax到底怎么回事。上面的链接中，官方给出了详细的使用方法，本文给出最简单的操作例子：$('a#more').live('click',function($e){$e.preventDefault();//点击链接时阻止进行网页跳转$.ajax({//当点击时触发ajaxtype: "GET",//...
JQuery 中使用 Ajax 发送 GET、POST 请求
热门推荐
assiduous_me的博客
05-11 5万+
What is Ajax ? Ajax = 异步 JavaScript 和 XML 一种用于创建快速动态网页的技术 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新 Why to useAjax ? 可以在不重新加载整个网页的情况下，对网页的某部分进行更新 How to use Ajax in JQuery ? 1. example ????!!! GET ????: ...
jquery中的ajax使用
qq_46023503的博客
10-05 1989
jquery中的ajax使用
jQuery中的Ajax
weixin_45375510的博客
10-11 4452
jQuery×Ajax jquery提供多个与ajax有关的方法，通过jquery ajax方法，能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON，同时能够把接收的数据更新到DOM对象。代替XMLHttpRequest，但其实jquery还是封装的异步对象。 (1)$.ajax() $.ajax()是jquery中ajax请求的核心方法，所有的其他方法都是在内部使用此方法。 语法： $.ajax({key: value, key: value, ...})
JQuery中的Ajax请求方式
YCQNB_的博客
02-27 2083
1.了解jQuery中的Ajax 在浏览器中提供了XMLHttpRequest用法比较复杂，因此jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，降低了Ajax的使用难度，提高了工作中的工作效率 2.$.get()函数 1.jQuery中的$.get()函数专门用来发起get请求,从而将服务器上的资源请求到客服端进行使用 $.get()函数的语法格式 $.get(url,[data],[callback]) url：要请求的资源地址 data:请求资源期间要
jQuery中使用Ajax获取JSON格式数据示例代码
ZHIYUANfL的博客
04-05 3030
有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者 $.getJSON()方法实现，下面有个不错的示例，需要的朋友可以参考下 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。 JSONM文件中包含了关于“名称”和“值”的信息。有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者 $.getJS
JQuery中使用ajax传输超大数据的解决方法
10-25
主要介绍了JQuery中使用ajax传输超大数据的解决方法,也就是比较多的数据,超过max_upload_size等设置,本文方法在chrome浏览器下测试通过,需要的朋友可以参考下
jquery中使用ajax获取远程页面信息
12-10
效果图如下： 先贴前台代码：其中关键代码是 通过span标记的data(自定义属性)绑定Id 代码如下: ”GvCollect” runat=”server” AutoGenerateColumns=”False” DataKeyNames=”Id” xss=removed ...
怎么使Ajax设为同步和异步
z13903931414的博客
05-21 292
Ajax（Asynchronous JavaScript and XML）最初的设计就是异步的，这意味着当发送请求时，浏览器不会等待服务器的响应就会继续执行后续的JavaScript代码。然而，有时你可能需要同步请求，即浏览器会等待服务器的响应，然后再继续执行后续的JavaScript代码。因此，如果你正在使用jQuery并且需要同步请求，你可能需要寻找其他方法或库来实现你的需求。总的来说，尽管有时可能需要同步请求，但你应该尽量避免使用它们，并尽可能利用异步请求的优势来提供更好的用户体验。
【Vue】Vue中的Ajax
低调做人，低调编码，神码都是浮云
05-18 608
Vue中的ajax、插槽、vuex等
Ajax原生介绍
weixin_44201223的博客
05-21 312
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。XMLHttpRequest 只是实现 Ajax 的一种方式。
前端开发工程师——ajax
[ 「今でもあなたは私の光。」❤️如今你依旧是我的光。
05-11 382
终端输入请求报文/响应报文。
node-v4.2.2-headers.tar.xz
最新发布
05-21
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
独栋别墅图纸D020-两层-10.00&11.00米- 施工图.dwg
05-21
独栋别墅图纸D020-两层-10.00&11.00米- 施工图.dwg
jquery中ajax的使用
09-30
使用jQuery中的ajax，你可以通过以下几个方面来实现： 1. 基本使用：通过调用$.ajax()函数来发送HTTP请求，并在成功或失败时执行相应的回调函数来处理响应。你可以指定请求的URL、请求类型（GET、POST等）、数据类型...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值