需求:請求第三方后臺接口返回一段html字符串如下,由前端去實現form表單的POST提交,
說明:form表單submit()實現自動提交input標簽hidden,注意script代碼中的document.redirect.submit();
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body> <form name="redirect" action="http://form_process.php" method="POST"> <input type="hidden" name="aaa" value="aaa_value"> <input type="hidden" name="bbb" value="bbb_value"> </form> <script type="text/javascript"> document.redirect.submit(); </script></body></html>
為了執行上一段字符串html代碼,用到了iframe標簽HTML5 的新屬性--srcdoc
HTML <iframe> 標簽的 srcdoc 屬性
<iframe srcdoc="HTML_code">
example:
問題來了
form表單submit()提交后,不能知道表單提交完成的狀態,因為從流程上考慮,需要判斷表單提交成功、失敗、網絡無連接等狀態,用submit()提交,獲取不了這些狀態。
解決步驟如下:
1、通過正則表達式提取表單中的method、action、和input表單的name、value的值,得到
var formData = { method: 'POST', url: 'http://form_process.php', data: {aaa:'aaa_value',bbb:'bbb_value'}}2、發送ajax請求
$http({ method : formData.method, url :formData.url, data : $httpParamSerializerJQLike(formData.data), // pass in data as strings headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload) }) .success(function(data) { console.log(data);//返回html字符串}).error(function(error) { console.log(error);});有兩個比較關鍵的地方:
1、$http參數data的值需要用$httpParamSerializerJQLike處理
2、加上headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
如果不做上面兩個處理,請求也能成功(狀態返回:200),只是不能在成功回調中拿到想要的response結果。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答