通過form的action屬性提交表單並接收處理返回值的方法(頁面不跳轉)
阿新 • • 發佈:2018-11-06
通過form的action屬性提交表單,這個很容易。但是,由於這種方式是同步提交,所以會導致頁面跳轉,且不好拿到返回值。一般都用ajax代替。
有些情況ajax是不能使用的,嚴格的說是不好使用的。例如檔案上傳功能。
<input type = "file">
通過form的action屬性提交表單,並接收處理返回值的方法如下:
html:
<iframe src="" frameborder="0" name="iframeContent" style="display: none;"></iframe>
<form action="aaa.json" target="iframeContent">
<input type="text" id="userName"/>
<input type="text" id="passWord"/>
<input type="submit" value="提交"/>
</form>
<script src="jquery-1.8.3.min.js"></script>
<script>
$("iframe[name=iframeContent]").on("load", function() {
var responseText = $("iframe")[0].contentDocument.body.getElementsByTagName("pre")[0].innerHTML;
alert(responseText);
//以下就可以判斷並處理返回值
})
</script>
這個方法是這樣的。
首先,寫一個iframe,並且給iframe display:none;
form元素有一個target屬性用於指定提交後跳轉到哪個頁面。所以指定target屬性為iframe的name。這樣的話返回值會存到iframe中。結構是這樣的
<iframe>
<pre>{"code": "01"}</pre>
</iframe>
其次,通過js監聽iframe的load事件。如果iframe載入完成,就會觸發load事件。這樣一旦有資料返回就會觸發事件。
獲取返回的資料,並處理返回的資料。
$("iframe")[0].contentDocument.body.getElementsByTagName("pre")[0].innerHTML;