不使用Ajax,如何實現表單提交不刷新頁面

不使用Ajax,如何實現表單提交不刷新頁面?

目前,我想到的是使用<iframe>,如果有其他的方式,后續再補。
舉個栗子:
在表單上傳文件的時候必須設置enctype="multipart/form-data"表示表單既有文本數據,又有文件等二進制數據。但是使用用Ajax沒有enctype="multipart/form-data",所以不能直接上傳文件,所以采用FormData對象包含數據上傳。
這里我們不使用Ajax,直接提交表單,添加一個隱藏得iframe,將form表單的target指向這個iframe來阻止刷新并且上傳文件。

<form method="POST" action="./upload.php" enctype="multipart/form-data" target='ifr' id="form1"><label for="name">name:</label><input type="text" id="name" name="name"/><br/><input type="file" name="file" ><input type="submit" value="提交">
</form>

接著,我們要獲取返回值

var iframe=document.getElementById("ifr");iframe.onload= function () {var bodycontent=iframe.contentDocument.body.innerHTML;console.log(bodycontent);//處理獲取到的內容;}

這樣的話基本上可以模擬ajax的操作,實現無刷新提交表單。 完整代碼:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form method="POST" action="./upload.php" enctype="multipart/form-data" target='ifr' id="form1"><label for="name">name:</label><input type="text" id="name" name="name"/><br/><input type="file" name="file" ><input type="submit" value="提交">
</form>
<iframe name='ifr' id="ifr" style='display: none;'></iframe>
<script>
var iframe=document.getElementById("ifr");iframe.onload= function () {var bodycontent=iframe.contentDocument.body.innerHTML;console.log(bodycontent);//處理獲取到的內容;}</script>
</body>
</html>
//php代碼<?phpecho "name:".$_POST['name'].";filename:".$_FILES['file']['name'];

轉載于:https://www.cnblogs.com/bluey/p/6255372.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/456566.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/456566.shtml
英文地址,請注明出處:http://en.pswp.cn/news/456566.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

AIML知識庫數據匹配原理解析

目錄&#xff1a;前言&#xff1a;1、AIML系統工作流程2、AIML的核心推理機制3、推理舉例4、匹配規則及實踐中遇到的一些問題的解釋總結&#xff1a; 目錄&#xff1a; 前言&#xff1a; 參考&#xff1a;《Alice機理分析與應用研究》 關于AIML庫這里就不介紹了&#xff0c…

【Python】模擬面試技術面試題答

一、 python語法 1. 請說一下你對迭代器和生成器的區別&#xff1f; 2. 什么是線程安全&#xff1f; 3. 你所遵循的代碼規范是什么&#xff1f;請舉例說明其要求&#xff1f; 4. Python中怎么簡單的實現列表去重&#xff1f; 5. python 中 yield 的用法…

ROS機器人程序設計(原書第2版)2.3 理解ROS開源社區級

2.3 理解ROS開源社區級 ROS開源社區級的概念主要是ROS資源&#xff0c;其能夠通過獨立的網絡社區分享軟件和知識。這些資源包括&#xff1a; 發行版&#xff08;Distribution&#xff09; ROS發行版是可以獨立安裝、帶有版本號的一系列綜合功能包。ROS發行版像Linux發行版一樣…

Win7 U盤安裝Ubuntu16.04 雙系統

Win7系統下安裝Ubuntu系統&#xff0c;主要分為三步&#xff1a; 第1步&#xff1a;制作U盤啟動盤 第2步&#xff1a;安裝Ubuntu系統 第3步&#xff1a;創建啟動系統引導 第1步&#xff1a;制作U盤啟動盤 1.下載Ubuntu16.04安裝鏡像&#xff0c;官網地址&#xff1a;http://www…

Word2VecDoc2Vec總結

轉自&#xff1a;http://www.cnblogs.com/maybe2030/p/5427148.html 目錄&#xff1a;1、詞向量2、Distributed representation詞向量表示3、word2vec算法思想4、doc2vec算法思想5、Doc2Vec主要參數詳解總結&#xff1a; 目錄&#xff1a; 1、詞向量 自然語言理解的問題要轉…

ubantu安裝pycharm破解+Linux基礎簡介

一、課程簡介 linux服務器配置及常用命令 Ubuntu centos 開發軟件配置及服務環境的搭建 軟件的安裝和配置 mysql數據庫使用、monDB使用、redius的使用 git的使用 html/css 課程學習方式 表達訓練 學習方法&#xff1a; linux學習基本上都是命令和配置 命令要多敲多記 …

《游戲視頻主播手冊》——2.2 哪些人適合做游戲主播

本節書摘來自異步社區《游戲視頻主播手冊》一書中的第2章&#xff0c;第2.2節&#xff0c;作者 王巖&#xff0c;更多章節內容可以訪問云棲社區“異步社區”公眾號查看。 2.2 哪些人適合做游戲主播 據不完全統計&#xff0c;目前國內有超過26000名活躍的游戲主播。所謂“活躍的…

Doc2Vec實踐

目錄:前言&#xff1a;第一步&#xff1a;首先我們需要拿到對應的數據&#xff0c;相關的代碼如下&#xff1a;第二步&#xff1a;拿到對應的數據后&#xff0c;就開始訓練數據生成對應的model&#xff0c;對應的代碼如下&#xff1a;第三步&#xff1a;得到生成的model后&…

Linux常用命令全網最全

一、linux文件系統結構 sudo apt-get install treetree --help #查看幫助tree -L 1 #顯示文件目錄 rootubuntu16 /# tree -L 1 . #系統根目錄&#xff0c;有且只有一個根目錄 ├── bin #存放常見的命令 ├── boot #系統啟動文件和核心文件都在這個目錄…

《開源思索集》一Source Code + X

本節書摘來異步社區《開源思索集》一書中的第1章&#xff0c;作者&#xff1a; 莊表偉 責編&#xff1a; 楊海玲, 更多章節內容可以訪問云棲社區“異步社區”公眾號查看。 Source Code X 開源思索集最近&#xff0c;有一位來自學術界朋友&#xff0c;找到了我們這個開源的圈子…

機器學習中目標函數、損失函數以及正則項的通俗解釋

目錄&#xff1a;前言&#xff1a;1、什么是目標函數&#xff1f;2、損失函數3、正則化總結&#xff1a; 目錄&#xff1a; 前言&#xff1a; 今天看到一篇很精簡的文章來說明目標函數、損失函數以及正則項是什么。以下是文章正文。 轉自&#xff1a;https://xiaozhuanlan.…

Linux中的 硬鏈接ln和軟連接ln -s

文件都有文件名與數據&#xff0c;這在 Linux 上被分成兩個部分&#xff1a;用戶數據 (user data) 與元數據 (metadata)。用戶數據&#xff0c;即文件數據塊 (data block)&#xff0c;數據塊是記錄文件真實內容的地方&#xff1b;而元數據則是文件的附加屬性&#xff0c;如文件…

干貨分享!DevExpressv16.2最新版演示示例等你來收!(上)

2019獨角獸企業重金招聘Python工程師標準>>> 為解決大家找資源難的問題&#xff0c;EVGET聯合DevExpress控件中文網盤點熱門的DevExpress資訊、Demo示例、版本升級及下載&#xff0c;以及各種教程推薦等。更多下載及資訊也可以在DevExpress控件中文網中找到&#xf…

一文看懂哈夫曼樹與哈夫曼編碼

轉自&#xff1a;http://www.cnblogs.com/Jezze/archive/2011/12/23/2299884.html 在一般的數據結構的書中&#xff0c;樹的那章后面&#xff0c;著者一般都會介紹一下哈夫曼(HUFFMAN)樹和哈夫曼編碼。哈夫曼編碼是哈夫曼樹的一個應用。哈夫曼編碼應用廣泛&#xff0c;如JPEG中…

解決:未能將管道連接到虛擬機: 所有的管道范例都在使用中。

虛擬機無端出現: VMware Workstation 無法連接到虛擬機。請確保您有權限運行該程序、訪問改程序使用的所有目錄以及訪問所有臨時文件目錄。未能將管道連接到虛擬機: 所有的管道范例都在使用中。 原因&#xff1a;Ubuntu開機慢到開不開&#xff0c;我就在任務管理器強制結束了…

tcpdf開發文檔(中文翻譯版)

2017年5月3日15:06:15 這個是英文翻譯版&#xff0c;我看過作者的文檔其實不太友善或者不方便閱讀&#xff0c;不如wiki方便 后面補充一些&#xff0c;結構性文檔翻譯 這是一部官方網站文檔&#xff0c;剩余大部分都是開發的時候和網絡總結來的 項目官網&#xff1a;https://t…

CCF推薦各種國際學術會議和期刊目錄

這是中國計算機學會推薦國際學術會議和期刊目錄2015年版本的內容&#xff0c; 主要羅列了國際上計算機相關的各個方向的頂級學術會議和期刊目錄&#xff08;包含A、B、C三個等級&#xff09;。 包含的方向有&#xff1a; 計算機體系結構/并行與分布計算/存儲系統計算機網絡網絡…

Linux基本操作【作業】

&#xfeff;1.如何使用命令立即重啟linux操作系統&#xff1f; sudo reboot 2.如何查看/etc下的所有文件&#xff0c;并以列表格式顯示&#xff0c;并且顯示隱藏文件 cd /etc | ls -la 3.一次性創建 text/1/2/3/4 cd tmp mkdir -p text/1/2/3/4 &#xff08;1&#xff…

開發日志_Jan.8.2017

這兩天繼續著手開發碰撞部分。 主要工作是寫碰撞類和運動線程類。碰撞主要在于算法&#xff0c;運動線程只要管理好就行了。 之前碰撞測試中&#xff08;即還未添加完整碰撞算法時&#xff09;遇到各種bug&#xff0c;疑似機器人和小球的定位點不明所造成的。昨天研究了下QT下的…

Nginx【學習筆記】

Nginx 1. nginx可以做什么&#xff1f; 可針對靜態資源高速高并發訪問及緩存。 可使用反向代理加速&#xff0c;并且可進行數據緩存。 具有簡單負載均衡、節點健康檢查和容錯功能。 支持遠程FastCGI服務的緩存加速。 支持FastCGI、Uwsgi、SCGI、Memcached Servers的加速和…