這篇文章主要介紹“Ajax上傳怎么實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理”,在日常操作中,相信很多人在Ajax上傳怎么實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”Ajax上傳怎么實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!

目前創(chuàng)新互聯(lián)建站已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、牟定網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
本文實(shí)例講述了Ajax上傳實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理的方法。分享給大家供大家參考。具體如下:
Ajax上傳說(shuō)白了還是使用form表單提交,在當(dāng)前頁(yè)面加一個(gè)iframe,將提交的內(nèi)容跳轉(zhuǎn)到iframe中,造成一種頁(yè)面無(wú)刷新的錯(cuò)覺(jué)。
以前也做過(guò)上傳,基本是是使用commons-fileupload組件,基本的步驟是使用servlet處理完上傳之后,使用PrintWrite的對(duì)象實(shí)例輸出顯示內(nèi)容,可以是直接輸出內(nèi)容,也可以是輸出script進(jìn)行操作如
復(fù)制代碼 代碼如下:
response.getWriter().write("<script type=\"text/javascript\"> parent.item_update.uploadUponSize();</script>");
或
復(fù)制代碼 代碼如下:
response.getWriter().write("上傳成功!");
這種做法是把對(duì)頁(yè)面端的操作都封裝到servlet中,現(xiàn)在一個(gè)需求是你接觸不到服務(wù)器端servlet,而上傳成功之后服務(wù)器只會(huì)返回一個(gè)標(biāo)志符,然后在頁(yè)面進(jìn)行操作。
可以根據(jù)form表單提交到這個(gè)iframe時(shí)會(huì)觸發(fā)一個(gè)load事件,所以對(duì)于這個(gè)需求的思路是:
1、在form表單提交時(shí),給iframe注冊(cè)load事件。
2、然后使用js對(duì)返回的標(biāo)志位進(jìn)行判斷操作。
3、移除綁定事件,避免多次綁定事件。
下面貼一個(gè)例子。
對(duì)于服務(wù)器端簡(jiǎn)單一點(diǎn),只會(huì)返回一個(gè)標(biāo)志位。
package com.justsy.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response) ;
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter writer = response.getWriter() ;
response.setContentType("text/html") ;
writer.print("<root>ok</root>") ;
}
}js文件
function submitForm(){
$("#hidden_iframe").load(function(){
var content = document.getElementById("hidden_iframe").contentWindow.document.body.innerHTML;
content = createXml(content);
var root = $(content).find("root").eq(0);
alert(root.text());
$("#hidden_iframe").unbind("load");
});
document.getElementById("form2").submit();
}
function createXml(str){
if (document.all) {
var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
xmlDom.loadXML(str);
return xmlDom;
}
else {
return new DOMParser().parseFromString(str, "text/xml");
}
}html文件
<form action="uploadServlet.do" id="form2" enctype="multipart/form-data" method="post" target="hidden_iframe"> <input type="hidden" name="method" value="uploadExcel" /><input type="button" value="Submit" onclick="submitForm()"/> </form> <iframe name="hidden_iframe" id="hidden_iframe" width="300" height="200"> </iframe>
這樣就可以根據(jù)頁(yè)面返回的內(nèi)容對(duì)頁(yè)面進(jìn)行操作了。
到此,關(guān)于“Ajax上傳怎么實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
本文題目:Ajax上傳怎么實(shí)現(xiàn)根據(jù)服務(wù)器端返回?cái)?shù)據(jù)進(jìn)行js處理
本文路徑:http://chinadenli.net/article48/jgjchp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、ChatGPT、網(wǎng)站內(nèi)鏈、App開發(fā)、python、用戶體驗(yàn)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)