ajax

最新推荐文章于 2020-04-07 19:44:20 发布
puddingpp
最新推荐文章于 2020-04-07 19:44:20 发布
阅读量157
点赞数
表单模拟ajax的操作，实现无刷新提交表单


在表单上传文件的时候必须设置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.οnlοad= 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.οnlοad= function () {
        var bodycontent=iframe.contentDocument.body.innerHTML;
        console.log(bodycontent);
        //处理获取到的内容；
    }

</script>
</body>
</html>

//php代码

<?php

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






 
 
用不用form都没关系的，如果用jquery.ajax的异步提交，其中url的参数传入自己拼装的url或者使用data参数传参。
如果使用form，则只需要加上jQuery('form').serialize()
jquery就会自动把form里有属性name的元素的值组装成url来传递。





现在来对比一下ajax与隐藏form提交的利与弊。
1.隐藏form提交，更新数据完成后，需要转到一个空白页面再对原页面进行提交后处理；ajax则不用，可以直接返回原页面进行提交后的处理。可见ajax可以比隐藏form提交少增加一个页面。
2.ajax出于安全性考虑，不能对文件进行操作，所以就不能通过ajax来实现文件上传，而通过隐藏form提交则可以实现这个功能，所以这就是目前用隐藏form提交的主要用途。
现在接下来讲述如何通过隐藏form来实现文件上传
1)首先定义一个用于填写表单内容的form
<form name="form1"></form>
2)接着定义一个用于提交的form
<form name="form2" target="myIframe">  //用于指定提交返回的页面显示在这个隐藏的iframe中
<iframe name="myIframe" style="display:none"></iframe>  //用于存放提交返回后的空白页面
<div id="formInner" style="display:none"></div>  //用于获取form1的html内容，获得form1的表单元素
</form>
3)在form1提交时，进行如下javascript处理
var formInner= document.getElementById("formInner");
formInner.innerHTML = form1.innerHTML;  //复制form1的html代码
form2.action = form1.action;
form2.submit();
4)提交后，进入后台处理，后台处理完成后，需要返回一个空白页面blank.jsp，这个页面是在隐藏的iframe中生成的，所以可以通过parent对象对原页面进行操作。
比如原页面定义了一个updatePageFromSubmit()，则在blank.jsp页面中可以通过parent.updatePageFromSubmit()来调用进行提交返回后的处理


请问如何打开网页时，就加载出数据库中的数据？
这种做法应该很多吧，我说下我的想法吧：

1、页面被加载时，通过onload事件或者jquery的$(function(){})使用ajax访问后台进行查询并返回数据

2、同上面一样，使用加载事件将网址重定向到后台的action路径，最后返回相关数据到首页

3、干脆就将主页地址设定为后台action的路径，然后将数据返回到指定的网址去