溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了怎么在angularjs中利用$http實現form表單提交，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
需求：請求第三方后臺接口返回一段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：
復制代碼 代碼如下:
<iframe srcdoc="<p>Hello world!</p><script>alert(123);</script>" src="demo_iframe_srcdoc.htm"></iframe>
問題來了
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' }
上述內容就是怎么在angularjs中利用$http實現form表單提交，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
