Jquery Ajax 调用函数
4.86/5 (41投票s)
Jquery Ajax 调用函数。
引言
最近我正在使用 ASP.NET 和 jQuery 开发一个网站。 在使用 JQuery 库时，我发现有 5 个不同的函数用于对页面进行 Ajax 调用并获取数据。 我将逐一讨论这五个函数。 以下是 JQuery 库中可用于进行 Ajax 调用的五个函数的列表。
Load (加载)getJsonGETPOSTAjax
Load (加载)
此方法允许对页面进行 ajax 调用，并允许使用 Get 和 Post 方法发送数据。
var loadUrl = "TestPage.htm";
$(document).ready(function () {
$("#load_basic").click(function () {
$("#result").html(ajax_load).load(loadUrl, function (response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#dvError").html(msg + xhr.status + " " + xhr.statusText);
}
}
);
return false;
});
正如您在上面的代码中看到的，您可以通过传递 Url 轻松地调用任何页面。 回调函数提供了更多的控制，并允许通过使用 Status 值来处理任何错误。 关于 load 方法的一个重要之处在于，它允许加载页面的部分内容，而不是整个页面。 因此，只获取页面的一部分调用保持不变，但 url 是
var loadUrl = "TestPage.htm #dvContainer";
因此，通过将上面的 url 传递给 load 方法，它只会加载具有 id=dvContainer 的 div 的内容。 查看演示代码了解详情。
Firebug 显示了当我们通过 Load 方法调用页面时，get 返回的响应。
重要特性
- 允许使用
Get和Post请求进行调用 - 允许加载页面的部分内容
getJson
此方法允许通过对页面进行 ajax 调用来获取 json 数据。 此方法仅允许通过 get 方法传递参数，不允许发布参数。 还有一件事 - 此方法将响应视为 Json。
var jsonUrl = "Json.htm";
$("#btnJson").click(function () {
$("#dvJson").html(ajax_load);
$.getJSON(jsonUrl, function (json) {
var result = json.name;
$("#dvJson").html(result);
}
);
return false;
});
上面的代码使用了 getJSON 函数并显示从页面获取的 json 数据。 以下是 Json.htm 文件返回的 json 数据。
{
"name": "Hemang Vyas",
"age" : "32",
"sex": "Male"
}
下图显示了作为响应返回的 json 数据。
重要特性
- 仅使用
get方法发送数据，不允许使用post。 - 仅将响应数据视为 Json
get
允许使用 get 方法进行 ajax 请求。 它处理多种格式的响应，包括 xml、html、text、script、json 和 jonsp。
var getUrl = "GETAndPostRequest.aspx";
$("#btnGet").click(function () {
$("#dvGet").html(ajax_load);
$.get(getUrl, { Name: "Pranay" }, function (result) {
$("#dvGet").html(result);
}
);
return false;
});
如代码所示，我正在使用 get 请求将 Name 参数传递到页面。 在服务器端，您可以在请求对象 querycollection 中获取 Name 参数的值。
if (Request.QueryString["Name"]!=null)
{
txtName.Text = Request.QueryString["Name"].ToString();
}
firebug 显示了我作为 Get 请求传递的参数，该参数的值为 pranay。
重要特性
- 可以处理任何类型的响应数据。
- 仅使用
get方法发送数据。
post
允许使用 post 方法进行 ajax 请求。 它处理多种格式的响应，包括 xml、html、text、script、json 和 jonsp。 post 与 get 的作用相同，只是使用 post 方法发送数据。
var postUrl = "GETAndPostRequest.aspx";
$("#btnPost").click(function () {
$("#dvPost").html(ajax_load);
$.post(postUrl, { Name: "Hanika" }, function (result) {
$("#dvPost").html(result);
}
);
return false;
});
如代码所示，我正在使用 post 请求将 Name 参数传递到页面。 在服务器端，您可以在请求对象 formcollection 中获取 Name 参数的值。
if (Request.Form["Name"] != null)
{
txtName.Text = Request.Form["Name"].ToString();
}
firebug 显示了我作为 Get 请求传递的参数，该参数的值为 Hanika。
重要特性
- 可以处理任何类型的响应数据。
- 仅使用
post方法发送数据。
ajax
允许进行 ajax 调用。 此方法比我们所见的所有其他方法提供更多的控制。 您可以通过检查参数列表来找出差异。
var ajaxUrl = "Json.htm";
$("#btnAjax").click(function () {
$("#dvAjax").html(ajax_load);
$.ajax({
type: "GET", //GET or POST or PUT or DELETE verb
url: ajaxUrl, // Location of the service
data: "", //Data sent to server
contentType: "", // content type sent to server
dataType: "json", //Expected data format from server
processdata: true, //True or False
success: function (json) {//On Successful service call
var result = json.name;
$("#dvAjax").html(result);
},
error: ServiceFailed // When Service call fails
});
return false;
});
在上面的代码中，您可以看到所有参数和与每个参数相关的注释描述了每个参数的目的。 Firebug 显示被调用的页面返回 json 数据，并且 Ajax 函数将响应视为 Json，因为在代码中 datatype = json。
重要特性
- 提供对数据发送和响应数据的更多控制。
- 允许处理调用期间发生的错误。
- 允许处理对 ajax 页面的调用是否成功的数据。
摘要
因此，jQuery ajax 的每种方法都不同，可以用于不同的目的。