JQuery之Ajax

最新推荐文章于 2024-09-14 16:21:49 发布

jiangzhengdong

最新推荐文章于 2024-09-14 16:21:49 发布

阅读量2.5k

点赞数

分类专栏： Javascript/CSS 文章标签： jquery url ajax string 服务器 jsonp

Javascript/CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.jquery.ajax(url [,settings])

url:包含url请求发送目的地的字符串（说白了就是jquery.ajax被调用后处理业务逻辑的url）

settings:配置ajax请求的键值对集合。其中所有的选项都是可选的。jquery.ajaxSetup(Options)设置setting的默认值。

下面对settings的属性一一介绍：

1）accepts

Map类型，默认依赖DataType。

在请求头中的content type告诉服务端他所接受的返回值类型。如果需要修改此值，最好在jquery.ajaxSetup中设置。

2）async

Boolean类型，默认为true。

3）beforeSend（jqXHR，Setttings）

在请求被发送前调用的预请求回调函数，用来修改jqXHR。

4）cache

默认值为true,当datatype为script或者jsonp时为false。

5）complete（jqXHR，textStatus）

请求完成调用的方法（在success和error方法之后执行）

6）contents

Map类型

7）contentType

默认值：'application/x-www-form-urlencoded; charset=UTF-8'，string类型

8）converters

默认值:"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML,Map类型。

9）data

Object，String类型

将被发送到服务器的数据。如果不是一个string类型，那么将会自动被转换成string类型。get请求时会被加到请求的url后面。

10）dataType

String类型，默认值为:xml, json, script, or html其中之一，智能匹配。

服务器发送回来的数据类型。

11）global

默认值为true

设置请求是否触发全局的ajax事件处理器。如果为false，则ajaxStart一类的方法将不会执行。

12）statusCode

Map类型

当相应对应某一个状态码时，此状态码对应的方法将被执行。eg：

	$.ajax({
  		statusCode: {
    		404: function() {
      		alert("page not found");
    		}
  	     }
	});

13）url

默认值：当前页面，string类型

请求被发送到的url

14)timeout

设置请求超时的milliseconds。

2.jquery.ajaxSetup(Options)

Options：配置ajax请求的键值对集合。其中所有的选项都是可选的。

注意：全局的回调函数应该在全局ajax事件处理方法中分别设置：.ajaxStart()，.ajaxStop(),.ajaxComplete(),

ajaxError(),.ajaxSuccess(),.ajaxSend()。

3.jquery.getJSON(url [,data] [,success(data,textStatus,jqXHR)])

url:字符串，其中包含的url的请求被发送

data:Map或字符串发送到请求的服务器

success(data,textStatus,jqXHR)：请求成功执行的回调函数

注：$.ajax只提交form以文本方式，如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

4.html()

描述：获取所有匹配元素中第一个元素的Html内容

注：此方法对xml文档不适用

在html文档里，.html()可用来获取任意一个元素的内容。如果选择器同时选中了多个元素，那么仅返回第一个匹配元素的Html内容。

eg:

	$('div.demo-container').html();

        <div class="demo-container">
  	   <div class="demo-box">Demonstration Box</div>
        </div>

最后输出结果为：<div class="demo-box">Demonstration Box</div>

5.html(htmlString)

描述：给每个匹配的元素设置html内容

eg:

<!DOCTYPE html>
<html>
<head>
  <style>

  .red { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span>Hello</span>
  <div></div>
  <div></div>
  <div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>

</body>
</html>

显示结果如下：

Hello
Hello Again
Hello Again
Hello Again

6.多选择器jQuery('selector1, selector2, selectorN')

可以将任意个选择器结合组成一个结果。

eg:

<!DOCTYPE html>
<html>
<head>
  <style>

  div,span,p {
    width: 126px;
    height: 60px;
    float:left;
    padding: 3px;
    margin: 2px;
    background-color: #EEEEEE;
    font-size:14px;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>div</div>

  <p class="myClass">p class="myClass"</p>
  <p class="notMyClass">p class="notMyClass"</p>
  <span>span</span>
<script>$("div,span,p.myClass").css("border","3px solid red");</script>

</body>
</html>

结果如下：

7.jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

参数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

eg:

Response.ContentType = "application/json";

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },

function (data, textStatus){

// data 可以是 xmlDoc, jsonObj, html, text, 等等.
//this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this
alert(data.result);

}, "json");

这里设置了请求的格式为"json",此时你没有设置Response回来的ContentType 为：Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。注意一下，alert(data.result); 由于设置了Accept报头为“json”，这里返回的data就是一个对象，并不需要用eval()来转换为对象。