不使用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'];