jQuery_API_09_Ajax

最新推荐文章于 2025-11-29 03:46:46 发布

最新推荐文章于 2025-11-29 03:46:46 发布 · 79 阅读

文章标签：

#Ajax #jQuery #PHP #json #JavaScript #ViewUI

本文详细介绍了如何使用jQuery库进行Ajax请求，包括GET和POST方法的应用、JSON数据处理及脚本加载等。此外，还讲解了多种Ajax事件及其用法，并提供了设置全局Ajax请求的方法。

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.youkuaiyun.com/mayongzhan - 马永占,myz,mayongzhan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="马永占(MyZ)" />
<meta name="Copyright" content="马永占(MyZ)" />
<meta name="description" content="" />
<meta name="keywords"content="" />
<link rel="icon" href="" type="image/x-icon" />
<link rel="shortcut icon" href="" type="image/x-icon" />
<link href="" rel="stylesheet" type="text/css" />
<title></title>
<style type="text/css">

</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
</head>
<body>

//jQuery.ajax( options ) Returns: XMLHttpRequest
//Load a remote page using an HTTP request.
//$.ajax({
// type: "GET",
// url: "test.js",
// dataType: "script"
//});
//or
// $.ajax({
// type: "POST",
// url: "some.php",
// data: "name=John&location=Boston",
// success: function(msg){
// alert( "Data Saved: " + msg );
// }
// });
//or
//$.ajax({
// url: "test.html",
// cache: false,
// success: function(html){
// $("#results").append(html);
// }
//});
//or
// var html = $.ajax({
// url: "some.php",
// async: false
// }).responseText;
// var xmlDocument = [create xml document];
// $.ajax({
// url: "page.php",
// processData: false,
// data: xmlDocument,
// success: handleResponse
// });

//load( url, data, callback ) Returns: jQuery
//Load HTML from a remote file and inject it into the DOM.
//$("#feeds").load("feeds.html");
//or
//$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );
//or
// $("#feeds").load("feeds.php", {limit: 25}, function(){
// alert("The last 25 entries in the feed have been loaded");
// });

//jQuery.get( url, data, callback, type ) Returns: XMLHttpRequest
//Load a remote page using an HTTP GET request.
//$.get("test.php");
//or
//$.get("test.php", { name: "John", time: "2pm" } );
//or
//$.get("test.php", { 'choices[]': ["Jon", "Susan"]} );
//or
//$.get("test.php", function(data){
// alert("Data Loaded: " + data);
//});
//or
//$.get("test.cgi", { name: "John", time: "2pm" },
// function(data){
// alert("Data Loaded: " + data);
// });

//jQuery.getJSON( url, data, callback ) Returns: XMLHttpRequest
//Load JSON data using an HTTP GET request.
//$.getJSON("test.js", function(json){
// alert("JSON Data: " + json.users[3].name);
//});
//or
//$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
// alert("JSON Data: " + json.users[3].name);
//});
//or
//var id=$("#id").attr("value");
// $.getJSON("pages.php",{id:id},dates);
//function dates(datos)
//{
//
// $("#list").html("Name:"+datos[1].name+"<br>"+"Last Name:"+datos[1].lastname+"<br>"+"Address:"+datos[1].address);
//}

//jQuery.getScript( url, callback ) Returns: XMLHttpRequest
//Loads, and executes, a local JavaScript file using an HTTP GET request.
//$.getScript("test.js");
//or
//$.getScript("test.js", function(){
// alert("Script loaded and executed.");
//});
//
//jQuery.post( url, data, callback, type ) Returns: XMLHttpRequest
//Load a remote page using an HTTP POST request.
//$.post("test.php");
//or
//$.post("test.php", { name: "John", time: "2pm" } );
//or
//$.post("test.php", { 'choices[]': ["Jon", "Susan"] });
//or
//$.post("test.php", function(data){
// alert("Data Loaded: " + data);
//});
//or
//$.post("test.php", { name: "John", time: "2pm" },
// function(data){
// alert("Data Loaded: " + data);
// });
//or
//$.post("test.php", { name: "John", time: "2pm" },
// function(data){
// process(data);
// }, "xml");
//or
//$.post("test.php", { func: "getNameAndTime" },
// function(data){
// alert(data.name); // John
// console.log(data.time); // 2pm
// }, "json");
////////////////////////////////////////////////////////////////////////////////////////
//Ajax Events:

//ajaxComplete( callback ) Returns: jQuery
//Attach a function to be executed whenever an AJAX request completes. This is an Ajax Event.
// $("#msg").ajaxComplete(function(request, settings){
// $(this).append("<li>Request Complete.</li>");
// });

//ajaxError( callback ) Returns: jQuery
//Attach a function to be executed whenever an AJAX request fails. This is an Ajax Event.
// $("#msg").ajaxError(function(event, request, settings){
// $(this).append("<li>Error requesting page " + settings.url + "</li>");
// });

//ajaxSend( callback ) Returns: jQuery
//Attach a function to be executed before an AJAX request is sent. This is an Ajax Event.
// $("#msg").ajaxSend(function(evt, request, settings){
// $(this).append("<li>Starting request at " + settings.url + "</li>");
// });

//ajaxStart( callback ) Returns: jQuery
//Attach a function to be executed whenever an AJAX request begins and there is none already active. This is an Ajax Event.
// $("#loading").ajaxStart(function(){
// $(this).show();
// });

//ajaxStop( callback ) Returns: jQuery
//Attach a function to be executed whenever all AJAX requests have ended. This is an Ajax Event.
// $("#loading").ajaxStop(function(){
// $(this).hide();
// });

//ajaxSuccess( callback ) Returns: jQuery
//Attach a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event.
// $("#msg").ajaxSuccess(function(evt, request, settings){
// $(this).append("<li>Successful Request!</li>");
// });
////////////////////////////////////////////////////////////////////////////////////////
//Misc:

//jQuery.ajaxSetup( options )
//Setup global settings for AJAX requests.
//$.ajaxSetup({
// url: "/xmlhttp/",
// global: false,
// type: "POST"
//});
//$.ajax({ data: myData });

//serialize( ) Returns: jQuery
//Serializes a set of input elements into a string of data.
// function showValues() {
// var str = $("form").serialize();
// $("#results").text(str);
// }
//
// $(":checkbox, :radio").click(showValues);
// $("select").change(showValues);
// showValues();

//serializeArray( ) Returns: jQuery
//Serializes all forms and form elements (like the .serialize() method) but returns a JSON data structure for you to work with.
// function showValues() {
// var fields = $(":input").serializeArray();
// $("#results").empty();
// jQuery.each(fields, function(i, field){
// $("#results").append(field.value + " ");
// });
// }
//
// $(":checkbox, :radio").click(showValues);
// $("select").change(showValues);
// showValues();
////////////////////////////////////////////////////////////////////////////////////////
});
</script>
</body>
</html>