ajax

来源：互联网发布：网络的宣传语编辑：程序博客网时间：2024/06/05 15:52
表单模拟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.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'];
用不用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的路径，然后将数据返回到指定的网址去
阅读全文
0 0