zoukankan      html  css  js  c++  java
  • 不使用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代码
    
    <?php
    
    echo "name:".$_POST['name'].";filename:".$_FILES['file']['name'];
    
  • 相关阅读:
    《修改代码的艺术》读书笔记
    《软件架构师的12项修炼》阅读笔记2
    《软件架构师的12项修炼》阅读笔记1
    python 包
    《编程珠玑》阅读笔记1
    Darknet和YOLO的区别和关系
    darknet
    yolov3
    软件质量属性
    酷客 机器学习十讲(一)机器学习介绍
  • 原文地址:https://www.cnblogs.com/bluey/p/6255372.html
Copyright © 2011-2022 走看看