非同步跨域提交form表單

2022-03-02 16:25:11 字數 895 閱讀 6171

為題描述:

產品需求是分兩步上傳檔案和提交頁面使用者輸入的資料:第一步,利用form上傳檔案和一部分資料,第二步,上傳檔案成功得到後端伺服器返回的檔案id,再一次連同檔案id和頁面其他資訊一同提交後台(也就是先上傳乙個檔案,然後再利用檔案id繫結到具體的「使用者」上)。

首先form應該這樣寫

再建立乙個隱藏的iframe在此就叫iframe1吧

以上form中的屬性都必須有,其中enctype是form上傳檔案是的格式,target的值就是隱藏iframe的name屬性的值。直接submit就可以提交form表單,此時後台返回的資料會在這個隱藏的iframe1中,此時問題來了,檔案上傳成功後後台返回的檔案id是在iframe1中的 ,然而iframe1和主頁面是不同域下的所以就牽扯到了跨域問題。

解決跨域問題的辦法就是在首先寫好乙個中間頁面tem.html,此中間頁面就是完成檔案和具體「使用者」繫結操作(提交相關資料給後台)。將這個中間頁面放在和iframe1同乙個域下。

tem.html中主要是 var body = parent.window.patchiframe.document.body; 來獲得iframe1中的內容,具體寫法視情況而定,此時就可以在tem.html中得到檔案的id。

用js動態生成乙個隱藏的iframe2,並在iframe2中載入這個中間頁面tem.html,請求tem.html時將需要和檔案id繫結的「使用者資料拼到url中」。這一步主要就是訪問tem.html讓他執行讀取,此時tem.html中就可以得到具體「使用者」的資料,也能得到檔案id,然後直接發給指定的介面。執行的此其實非同步提交form已經成功了,但是主頁面是沒有反應的,使用者體驗不好。

最有一步就是iframe2和主頁面之間的通訊,告訴主頁面操作成功。使用到的辦法就是postmessage方法,詳見

主頁面得到資料就可以做使用者友好的反饋。

ajax提交form表單 跨域

有時候我們需要提交form表單,而又不想影響跳轉頁面,同時還不影響瀏覽器的 正常訪問,這個時候就用到了ajax提交 首先,要引入js檔案 var form form serialize ajax 以上就是用ajax提交form表單的操作,後台可以直接接收乙個model 客戶端js 服務端 1 str...

如何非同步提交表單 如何非同步跨域提交表單

1.使用post提交方式 2.構造表單的數格式 3.結合form表單的submit呼叫ajax的 函式。使用 jquery 非同步提交表單 html xmlns head title 無標題頁 title head script src js jquery 1.4.2.js script scrip...

PHP跨域form提交

因為安全性因素,直接跨域訪問是不被允許的。1 php curl方式 function curlpost url,params rtrim postdata,ch curl init curl setopt ch,curlopt url,url curl setopt ch,curlopt retur...