jQuery Ajax使用实例

介绍jQuery Ajax的强大之处：从入门到实战

你是否觉得异步提交繁琐复杂？jQuery的AJAX功能将为你轻松解决这一难题。无需再为不同浏览器的差异而烦恼，jQuery大大简化了异步提交的操作。

一、领略$.ajax的一般风采

你是否被这样的代码所吸引：

$.ajax({

type: 'POST',

url: url,

data: data,

success: function(data) { ... },

dataType: dataType

});

二、$.ajax的参数奥秘

每一个参数都有其独特的意义：

url：你的请求将送往何方？这里给出明确的答案。

data：你要与服务器分享哪些信息？文本、JSON或是表单数据，一切由你决定。

success：当请求成功时，你想做什么？这里写你的回调函数。

dataType：你期待从服务器得到什么样的响应？xml、json、script还是html？

三、注意$.ajax的小细节

$.ajax并非无所不能。有两大细节需要你注意：

1. data的提交方式多种多样，可以是html拼接的，json数组，或是经过serialize()序列化的form表单。通过dataType来指定，未指定的将进行智能判断。

2. 若想异步提交包含的文件，单纯使用$.ajax可能无法完成，此时你需要借助jquery.form.js的$.ajaxSubmit。

四、实战$.ajax应用案例

下面是我的一个实际应用例子，带着json数据的异步请求：

var request = $.ajax({

url: 'productManager_reverseUpdate', // 指定请求地址

data: { // 发送的数据

selRollBack: selRollBack,

selOperatorsCode: selOperatorsCode,

PROVINCECODE: PROVINCECODE,

pass2: pass2

},

type: 'post', // 请求方式

cache: false, // 不缓存数据

dataType: 'json', // 期望的返回数据类型

success: function(data) { // 请求成功的回调函数

if (data.msg == "true") {

// view("修改成功！");

alert("修改成功！");

window.location.reload(); // 页面刷新

} else {

view(data.msg); // 显示返回的消息

}

},

error: function() { // 请求失败的回调函数

// view("异常！");

alert("异常！");

}

在文章的开篇，通过引人入胜的方式开启，比如：“在数字世界中，信息的交互与传递如同波澜壮阔的江河，而我们的代码就是那操控江河水流的舵手。今天，我们来如何通过AJAX技术实现数据的异步传输。”

“当你点击某个按钮或者触发某个事件时，表单内的数据需要被迅速传递至服务器进行处理。让我们看看如何通过AJAX实现这一过程。”

函数`noTips`开始执行：

```javascript

function noTips() {

// 将表单内容（例如form1）转化为字符串格式

var formParam = $("form1").serialize();

// 使用AJAX技术，向服务器发送请求

$.ajax({

type: 'post', // 指定请求方式为POST

url: 'Notice_noTipsNotice', // 请求的路径

data: formParam, // 发送的数据

cache: false, // 禁用缓存

dataType: 'json', // 期望返回的数据类型

success: function(data) { // 请求成功后的回调函数

// 在此处处理返回的数据（data）

}

});

}

```

```javascript

var yz = $.ajax({

type: 'post', // 指定请求类型为POST

url: 'validatePwd2_checkPwd2?password2=' + password2, // 动态构建URL并传递密码参数

data: {}, // 可以额外传递数据到服务器（如果需要的话）

cache: false, // 不使用缓存，确保数据的实时性

dataType: 'json', // 期望服务器返回的数据格式是JSON

success: function(data) { // 请求成功后的回调函数

if (data.msg === "false") { // 服务器返回信息指示密码不正确

textPassword2.html('业务密码不正确！'); // 提示信息展示在界面上

$("validatePassword2").val("pwd2Error"); // 设置输入框值为错误信息

checkPassword2 = false; // 设置状态标志为失败状态

return; // 返回并结束函数执行（如果需要的话）

}

}, // 注意这里修正了success的拼写错误，将suess改为success。同时添加了注释说明。

error: function() { // 请求失败时的回调函数为空，可以添加错误处理逻辑。 }

});