AJAX¶¯Ì¬ÉÏ´«ÎļþµÄÔÀí
нüѧϰAJAX¼¼Êõ£¬ÔÚÌåÑéÁËJSON´«ÊäÊý¾Ý£¬jqueryÌṩ½çÃæÐ§¹ûµÄ¼¼Êõºó£¬¶ÔJqueryµÄÎÞË¢ÐÂÌá½»Êý¾Ý¸Ð¾õͦ²»´í¡£È»¶øÏÖÔÚÒª´¦ÀíÎÞË¢ÐÂÉÏ´«Îļþ£¬JSÊÇ¿ÉÒÔ¶ÔÎļþ½øÐйÜÀíºÍ´´½¨µÄ£¬È»¶øÈç¹ûʹÓÃjsÀ´¶ÁÈ¡²¢¶þ½øÖÆ»¯ÎļþÖ÷ÒªÊÇȨÏ޺ʹúÂ븴ÔӶȵÄÎÊÌ⣬¶øÇÒä¯ÀÀÆ÷µÄ formµÄenctypeÄܹ»ºÜ¼òµ¥µÄʵÏÖÎļþµÄÉÏ´«¡£
ÓÐÅóÓѽ²¿ÉÒÔͨ¹ýiframeÒþ²Ø¶ÔÏóÀ´´«ËÍÎļþ£¬ÎÒ¾õµÃÒ²ÊǷdz£²»´íµÄÒ»¸ö°ì·¨£¬°ÑÏÔʾµÄformÉèΪһ°ãÀàÐÍ£¬ÔÚÌá½»µÄʱºò£¬°Ñ¶ÔÓ¦Öµ¸³Öµ¸øiframe¶ÔÏóµÄform£¬È»ºóµ÷ÓÃiframedµÄformµÄsubmit();¾Í¿ÉÒÔ°ÑÎļþÉÏ´«ÉÏÈ¥ÁË¡£
´ÓÀíÂÛÉϽ²£¬ÉÏÃæµÄ¹¤×÷ʵÏÖÆðÀ´Ò²²»ÊÇÌ«ÄÑ£¬Ö»ÊÇÒª¶ÔÓÚiframeÉÏ´«À´½²£¬²»ÊÇºÜºÃ¼à¿Ø½ø¶È£¬ÎÒµÄÒ»¸öÅóÓÑÒѾͨ¹ýÕâÖÖ·½·¨ÊµÏÖÁËÎļþµÄÉÏ´«¡£µ«ÊÇjQuery·á¸»µÄ²å¼þ¿â¸øÎÒÌṩÁ˼«´óµÄ±ãÀû¡£ÓÚÊÇËÑË÷ÁËÒ»ÏÂjQueryµÄÎļþÉÏ´«£¬·¢ÏÖÁËÕâ¸ö½Ð£ºAjaxFileUploadµÄ²å¼þ¡£
¹¤ÐòÒ²ºÜ¼ò½à£¬¸üÒ»°ãµÄAJAXÎı¾´«Êä²î±ð²»ÊÇÌ«´ó£¬ÏÂÃæÕª³µÄÒ»Î»ÍøÓѵÄÖ¸µ¼£¬¸úAPIÀïÃæµÄÏà²î²»´ó£º
ÐèҪʹÓÃjQuery¿âÎļþºÍAjaxFileUpload¿âÎļþ
ʹÓÃʵÀý
Ò»£¬°üº¬Îļþ²¿·Ö
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
¶þ£¬HTML²¿·Ö
<img id="loading" src="loading.gif" style="display:none;">
<input id="fileToUpload" type="file" size="20" name="fileToUpload" class="input">
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">ÉÏ´«</button>
Ö»ÐèÒªÈý¸öÔªËØ£¬Ò»¸ö¶¯Ì¬¼ÓÔØÐ¡Í¼±ê¡¢Ò»¸öÎļþÓòºÍÒ»¸ö°´Å¥
×¢Ò⣺ʹÓÃAjaxFileUpload²å¼þÉÏ´«Îļþ¿É²»ÐèÒªform£¬ÈçÏ£º
<form name="form" action="" method="POST" enctype="multipart/form-data">
……Ïà¹Øhtml´úÂë……
</form>
ÒòΪAjaxFileUpload²å¼þ»á×Ô¶¯Éú³ÉÒ»¸öformÌá½»±íµ¥¡£
¶ÔÓÚfileÎļþÓòIDºÍname£¬ajaxFileUpload²å¼þfileElementId²ÎÊýÐèÒª»ñÈ¡ÎļþÓòID£¬Èç¹û´¦ÀíÉÏ´«Îļþ²Ù×÷¾ÍÐèÒªÖªµÀÎļþÓòname£¬ÒÔ±ã»ñÈ¡ÉÏ´«ÎļþÐÅÏ¢£¬ÕâÁ½Õß¹ØÏµÒ»¶¨ÒªÇå³þ¡£
Èý£¬javascript²¿·Ö
<script type="text/javascript">
function ajaxFileUpload(){
loading();//¶¯Ì¬¼ÓÔØÐ¡Í¼±ê
$.ajaxFileUpload({
url:'upload.php',
secureuri:false,
fileElemen
Ïà¹ØÎĵµ£º
Default3.aspx Code:
<%@Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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"& ......
²ÉÓÃAjax´«µÝ²ÎÊý¼ÓºÅ(+)ºÍÓë·ûºÅ(&)ʱºò£¬·þÎñ¶Ë»ñÈ¡µ½µÄ²ÎÊý²¢²»ÈçÒ⣡
(1) "+"ºÅ£ºJavaScript½âÎöΪ×Ö·û´®Á¬½Ó·û£¬ËùÒÔ·þÎñÆ÷¶Ë½ÓÊÕÊý¾Ýʱ"+"»á¶ªÊ§¡£
(2)"&"£ºJavaScript½âÎöΪ±äÁ¿Á¬½Ó·û£¬ËùÒÔ·þÎñÆ÷¶Ë½ÓÊÕÊý¾Ýʱ&·ûºÅÒÔºóµÄÊý¾Ý¶¼»á¶ªÊ§¡£
½â¾ö°ì·¨£ºÔÚ´«µ½·þÎñ¶Ë֮ǰÏȽ«²ÎÊýÖеÄ"+"ºÍ"&"·ûºÅ¶¼± ......
//´´½¨XMLHttpRequest¶ÔÏó£¬ÐèÒª¸ù¾ÝIEºÍä¯ÀÀÆ÷ÀàÐÍ´´½¨²»Í¬µÄxhr¶ÔÏó
var xhrobj;
function check()
{
//»ñÈ¡Îı¾¿òµÄÖµ
var username = document.getElementById("username").value;
if(window.XMLHttpRequest)
{
//Õë¶Ôfirefox£¬Mozilla£¬ie7£¬ie8µÈ
xhrobj = new XMLHttpRequest();
/ ......
Ò³ÃæÎļþÀàËÆ£º
<% using (Ajax.BeginForm("AjaxUpdate", 123, new AjaxOptions {
Confirm = "confirm str", LoadingElementId = "idLoading", UpdateTargetId
= "textEntered", OnSuccess = "validateForm" },new{id="idMyForm"}))
&nbs ......
À´Ô´£ºhaoxuewu - BlogJava
¡¡¡¡Ç°¶Îʱ¼ä×öÏîÄ¿Óõ½ÁËjson£¬½ñÌìÎÒ³éʱ¼äдÁËÒ»¸östruts+ajax+jsonµÄÀý×Ó.
¡¡¡¡¸öÈ˸оõajax+jsonÔںܴó³Ì¶ÈÉϽµµÍÁËÍøÂçºÍ·þÎñÆ÷µÄIO£¬ÊÇÒ»¸öºÜ²»´íµÄ×éºÏ£¡
¡¡¡¡1£ºjsonµÄlibÎÒÓõÄÊÇjson-lib-2.1-jdk15.jar£¬Ëü¿ÉÒÔÔÚ
¡¡¡¡2£ºstrutsÓõÄÊÇ1.2
¡¡¡¡3£ºÓõ½ÁËjsµÚÈý·½prototype.js£¬Ö÷ ......