»ùÓÚJQuery¿ò¼ÜµÄAJAX,AJAXµÄÈýÖÖʵÏÖ·½Ê½
»ùÓÚJQuery¿ò¼ÜµÄAJAX
Ç°¼¸Ìì·¢Á˸öÌù£¬·ÖÏíÁËprototype¿ò¼Ü¹ØÓÚAJAX·½ÃæµÄѧϰ¹ý³Ì¡£È»ºóÓÐÈË˵jquery¿ò¼Ü¸ü·½±ã¡£
ÕýºÃÏîÄ¿ÖÐ×¼±¸Ê¹ÓÃthickbox£¬ÓÚÊǸɴàÅ×Æúprototype.js£¬¿´Æðjquery.jsÁË¡£JQueryȷʵ²»´í£¬Ìå»ý±È PrototypeСÁËÐí¶à£¬¶øÇÒʹÓÃÆðÀ´¸ü·½±ã¸üÁé»î¡£ÓÐÈË˵PrototypeÏñJAVA£¬Õýͳ£»¶øJQueryÏñRuby£¬Áé»î£¬¸üÇ÷ÓÚOOP¡£
СÊÔÁËÏÂAJAX£¬¸Ð¾õ±Èprototype¼ò½à¶àÁË£¬ÔÚJQueryÖУ¬AJAXÓÐÈýÖÖʵÏÖ·½Ê½£º$.ajax(),$.post,$.get()¡£
XHTML(Ö÷Òª):
<div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div>
<form id="formtest" action="" method="post">
<p><span>ÊäÈëÐÕÃû:</span><input type="text" name="username" id="input1" /></p>
<p><span>ÊäÈëÄêÁä:</span><input type="text" name="age" id="input2" /></p>
<p><span>ÊäÈëÐÔ±ð:</span><input type="text" name="sex" id="input3" /></p>
<p><span>ÊäÈ빤×÷:</span><input type="text" name="job" id="input4" /></p>
</form>
<button id="send_ajax">Ìá½»</button>
<button id="test_post">POSTÌá½»</button>
<button id="test_get">GETÌá½»</button>
JS:
1¡¢ÒýÈëjquery¿ò¼Ü£º
<scrīpt type="text/javascrīpt" src="../js/jquery.js"></scrīpt>
2¡¢¹¹½¨AJAX£¬JQUERYµÄºÃ´¦ÊDz»ÐèÒªÔÚXHTMLÖÐʹÓÃJS´úÂëÀ´´¥·¢Ê¼þÁË£¬¿ÉÒÔÖ±½Ó·â×°ÔÚJSÎļþÖУº
<scrīpt type="text/javascrīpt">
//$.ajax()·½Ê½
$(document).ready(function (){
$('#send_ajax').click(function (){ //Ö±½Ó°ÑonclickʼþдÔÚÁËJSÖУ¬¶ø²»ÐèÒª»ìÔÚXHTMLÖÐÁË
var params=$('input').serialize(); //ÐòÁл¯±íµ¥µÄÖµ£¬ÓëprototypeÖеÄform.serialize()Ïàͬ
$.ajax({
url £º'ajax_test.php', //ºǫ́´¦Àí³ÌÐò
type:'post', //Êý¾Ý·¢ËÍ·½Ê½
dataType:'json', //½ÓÊ
Ïà¹ØÎĵµ£º
Microsoft AJAX Library
Microsoft AJAX Library[ÏÂÔØ]ÊÇ΢ÈíΪASP.NETµÄAJAX¹¦ÄÜÌṩµÄ¿Í»§¶ËJavascriptÀ©Õ¹Àà¿â¡£ËäÈ»ÊÇΪASP.NET±àдµÄ£¬µ«Í¬ÑùÊÊÓÃÓÚÆäËûÓïÑÔ¡£
ÓëÈç½ñ±»¹ã·ºÊ¹ÓõÄprototype¡¢jqueryµÈAJAXÀà¿âÏà±È£¬Microsoft AJAX LibraryLÁé»îÐÔ¿ÉÄܲ»×㣬¶øÇÒҲûÓÐÆäËûÀà¿â"Çá"£¬Èçprototy ......
dataÀàÐÍ
js´úÂ룺
$.post("getmaterial.do?method=getmaterial",
{name:name},
function (data) {
});
ÆäÖÐgetmaterial.do?method=getmaterialÊÇÇëÇóµÄurl£¬{name:name}ÊÇ´«µÝµ½ºǫ́µÄ²ÎÊý£¬¿ÉÒÔÓÃ
request.getParameter("name");»ñÈ¡£¬dataÊǺǫ́´«µÝ¹ýÀ´µÄÊý¾Ý¡£
action´úÂ룺
response.setContentType( ......
ÔÚÕâ¸ö±»Ajax¼¼ÊõͳÖεĻ¥ÁªÍøʱ´ú£¬ºÜ¶àAjax³ÌÐò¶¼»áÔÚÒì²½¶ÁÈ¡Êý¾ÝµÄͬʱ£¬ÏÔʾһ¸öÕýÔÚ¶ÁÈ¡»òLoadingµÄ¶¯»£¬½ñÌì±òGoÒªÏò´ó¼Ò
ÍƼöÒ»¸öÔÚÏßÉú³ÉLoadingÔ¤Ôض¯»GifͼƬµÄÍøÕ¾£¬Ëü²»µ«ÌṩÁ˳¬¶àµÄLoading¶¯»Ñùʽ¹©ÄãÑ¡Ôñ£¬¶øÇÒÄ㻹¿ÉÒÔ×Ô¶¨Òå³ß´ç¡¢ÑÕÉ«µÈ²ÎÊý£¬¿É
ν·½±ãµ½¼Ò£¬×î×îÖØÒªµÄÊÇ£¬PreLoaders.net
Ìṩ ......
ajaxÖÐʹÓÃpost ·½Ê½Ìá½»±íµ¥Ê±ÄÜÌá½»¶à´ï2GBµÄÄÚÈÝ,¶øGET·½·¨Ö»ÄÜÌá½»×î¶à512KBµÄÄÚÈÝ.ÒÔÏÂÊÇajax POSTÌá½»µÄÀý×Ó.
<!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& ......
±¾ÎĵØÖ·: jQuery Ajax È«½âÎö
±¾ÎÄ×÷ÕߣºQLeelulu
תÔØÇë±êÃ÷³ö´¦£¡
jQueryȷʵÊÇÒ»¸öͦºÃµÄÇáÁ¿¼¶µÄJS¿ò¼Ü£¬ÄÜ°ïÖúÎÒÃÇ¿ìËٵĿª·¢JSÓ¦Ó㬲¢ÔÚÒ»¶¨³Ì¶ÈÉϸıäÁËÎÒÃÇдJavaScript´úÂëµÄÏ°¹ß¡£
·Ï»°ÉÙ˵£¬Ö±½Ó½øÈëÕýÌ⣬ÎÒÃÇÏÈÀ´¿´Ò»Ð©¼òµ¥µÄ·½·¨£¬ÕâЩ·½·¨¶¼ÊǶÔjQuery.ajax()½øÐзâ×°ÒÔ·½±ãÎÒÃÇʹÓõķ½·¨£¬µ±È»£¬Èç¹ ......