»ùÓÚ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', //½ÓÊ
Ïà¹ØÎĵµ£º
<script language="javascript" type="text/javascript">
var xmlHttp = null;
function CreateXMLHttp()
{
......
AjaxºÍjspµÄ¹ÖÏÖÏó
Èç¹ûÓÃAjaxÈ¥ÇëÇóÒ»¸öjspÒ³Ãæ£¬¸ÃjspÒ³Ãæ·µ»ØµÄÊÇxml£¨response.setContentType("text/xml; charset=GB2312");£©£¬²¢ÇÒ¸Ãjsp°üº¬ÏÂÃæÕâЩͷ@pageÖ¸ÁîµÄ»°£¬ÔòÔÚ¿Í»§¶Ëxml=XMLHttpRequest.responseXMLµÃµ½µÄÊÇÒ»¸ö²»°üº¬ÈÎÎñ¶«Î÷µÄxml¶ÔÏ󣬼´xml.childNodes.length½«»áÊÇ0.
......
ajaxµÄÁбíÁª¶¯Ê¾Àý
1¡¢ ÊäÈëÓò£º
ÇëÑ¡ÔñÊ¡£º
<select id="sel1" onchange="return choose(this);">
<option value="">--ÇëÑ¡Ôñ--</option>
<option value="1">ºþÄÏÊ¡</option>
&nb ......
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()½øÐзâ×°ÒÔ·½±ãÎÒÃÇʹÓõķ½·¨£¬µ±È»£¬Èç¹ ......