jQuery学习笔记8

最新推荐文章于 2025-02-25 09:51:17 发布

原创最新推荐文章于 2025-02-25 09:51:17 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

javascript 专栏收录该内容

13 篇文章

订阅专栏

jQuery学习笔记8

Ajax

1.Ajax请求

jQuery.ajax(url,[settings]) 通过HTTP请求加载远程数据。

参数介绍：

url:一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。所有选项都是可选的。

$.ajax()返回创建的XMLHttpRequest对象。

回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及”dataType”参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

示例：

加载并执行一个 JS 文件。

jQuery 代码:

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

load(url,[data],[callback]) 载入远程HTML文件代码并插入至DOM中

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

示例:

加载文章侧边栏导航部分至一个无序列表。

HTML 代码:
```
<b>jQuery Links:</b>
<ul id="links"></ul>
```
jQuery 代码:
```
$("#links").load("/Main_Page #p-Getting-Started li");
```
jQuery.get(url,[data],[callback],[type])通过远程HTTP GET请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 \$.ajax。

url:待载入页面的URL地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

示例：

请求 test.php 网页，传送2个参数，忽略返回值。

jQuery 代码:
```
$.get("test.php", { name: "John", time: "2pm" } );
```
jQuery.getJSON(url,[data],[callback]) 通过HTTP GET请求载入JSON数据

url:发送请求地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数。
jQuery.getScript(url,[callback]) 通过HTTP GET请求载入并执行一个JavaScript文件。
jQuery.post(url,[data],[callback],[type]) 通过远程HTTP POST请求载入信息。这是一个简单的 POST 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

示例：

请求 test.php 页面，并一起发送一些额外的数据（同时仍然忽略返回值）：

jQuery 代码:
```
$.post("test.php", { name: "John", time: "2pm" } );
```
向服务器传递数据数组（同时仍然忽略返回值）：

jQuery 代码:
```
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });
```
使用 Ajax 请求发送表单数据：

jQuery 代码:
```
$.post("test.php", $("#testform").serialize());
```

2.Ajax事件

ajaxComplete(callback) AJAX请求完成时执行函数。

示例

Ajax请求完成时执行函数。

jQuery代码：
```
$("#msg").ajaxComplete(function(event,request, settings){
 $(this).append("<li>请求完成.</li>");
});
```

ajaxSend(callback) Ajax请求发送前执行函数。

示例

AJAX 请求发送前显示信息。

jQuery代码：

$("#msg").ajaxSend(function(evt, request, settings){
 $(this).append("<li>开始请求: " + settings.url + "</li>");
});

ajaxError(callback) Ajax请求发生错误时执行函数。

示例

AJAX 请求失败时显示信息。

jQuery代码：

$("#msg").ajaxError(function(event,request, settings){
   $(this).append("<li>出错页面:" + settings.url + "</li>");
});

ajaxStart(callback) Ajax请求开始时执行函数。

示例

AJAX 请求开始时显示信息。

jQuery代码：
```
$("#loading").ajaxStart(function(){
 $(this).show();
});
```
ajaxStop(callback) Ajax请求结束时执行函数。

示例

AJAX 请求结束后隐藏信息。

jQuery代码：
```
$("#loading").ajaxStop(function(){
 $(this).hide();
});
```
ajaxSuccess(callback) Ajax请求成功时执行函数。

示例

AJAX 请求成功后显示信息。

jQuery代码：
```
$("#msg").ajaxSuccess(function(evt, request, settings){
 $(this).append("<li>请求成功!</li>");
});
```

3.其他

jQuery.ajaxPrefilter( [dataTypes] , handler(options, originalOptions, jqXHR) )
jQuery.ajaxSetup([options]) 设置全局AJAX默认选项。
- 设置 AJAX 请求默认地址为 “/xmlhttp/”，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。
jQuery 代码:
```
$.ajaxSetup({
  url: "/xmlhttp/",
  global: false,
  type: "POST"
});
$.ajax({ data: myData });
```

serialize() 序列化表格内容为字符串。用于Ajax请求。

##### HTML 代码:

<p id="results"><b>Results: </b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>

jQuery 代码:

$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

serializeArray() 序列化表格元素(类似.serialize()方法)返回JSON数据

注意，此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数（如果value不为空的话）。举例来说：

[ 
     {name: 'firstname', value: 'Hello'}, 
     {name: 'lastname', value: 'World'},
     {name: 'alias'}, // this one was empty
]

示例：

取得表单内容并插入到网页中。

HTML 代码:

<p id="results"><b>Results:</b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>

jQuery 代码:

var fields = $("select,:radio").serializeArray();
jQuery.each( fields, function(i, field){
  $("#results").append(field.value + " ");
});