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

時間 2020-05-15

標籤不使 ajax 如何實現表單提交刷新頁面欄目 Ajax 简体版

原文原文鏈接

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

目前，我想到的是使用<iframe>，若是有其餘的方式，後續再補。
舉個栗子：
在表單上傳文件的時候必須設置enctype="multipart/form-data"表示表單既有文本數據，又有文件等二進制數據。可是使用用Ajax沒有enctype="multipart/form-data"，因此不能直接上傳文件，因此採用FormData對象包含數據上傳。
這裏咱們不使用Ajax，直接提交表單，添加一個隱藏得iframe，將form表單的target指向這個iframe來阻止刷新而且上傳文件。javascript

<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>

接着，咱們要獲取返回值php

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

這樣的話基本上能夠模擬ajax的操做，實現無刷新提交表單。完整代碼：html

<!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代碼

<?php

echo "name:".$_POST['name'].";filename:".$_FILES['file']['name'];

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。