100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 不使用Ajax 如何实现表单提交不刷新页面

不使用Ajax 如何实现表单提交不刷新页面

时间:2021-09-06 03:16:14

相关推荐

不使用Ajax 如何实现表单提交不刷新页面

不使用Ajax,如何实现表单提交不刷新页面?

目前,我想到的是使用<iframe>,如果有其他的方式,后续再补。

举个栗子:

在表单上传文件的时候必须设置enctype="multipart/form-data"表示表单既有文本数据,又有文件等二进制数据。但是使用用Ajax没有enctype="multipart/form-data",所以不能直接上传文件,所以采用FormData对象包含数据上传。

这里我们不使用Ajax,直接提交表单,添加一个隐藏得iframe,将form表单的target指向这个iframe来阻止刷新并且上传文件。

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

接着,我们要获取返回值

var iframe=document.getElementById("ifr");iframe.onload= function () {var bodycontent=iframe.contentDocument.body.innerHTML;console.log(bodycontent);//处理获取到的内容;}

这样的话基本上可以模拟ajax的操作,实现无刷新提交表单。 完整代码:

<!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代码<?phpecho "name:".$_POST['name'].";filename:".$_FILES['file']['name'];

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。