用iframe模拟ajax实现表单无刷新提交

2019-1-11 zhulinan JavaScript

对于文件类型的数据，有些浏览器是无法使用ajax进行传递的，此时若想实现页面无刷新上传数据，我们可以借助iframe来实现。

表单页面代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta charset="UTF-8"> <title>用iframe模拟ajax实现表单无刷新提交</title> <style type="text/css"> *{ font-size:12px; } html, body, form{ margin:0; padding:0; } .tb1 { margin:10px 0 0 0; } .tb1 tr{ height:30px; } .tb1 .td1 { width:200px; text-align:right; } .tb1 input[type="text"], input[type="password"] { width:300px; } .tb1 input[type="button"] { padding:1px 30px 2px 30px; } #msg { margin:20px 0; color:red; } </style> </head> <body> <form id="myForm" enctype="multipart/form-data" onsubmit="return false"> <table class='tb1'> <tr><td class='td1'>用户名：</td><td><input type='text' name='uname' /></td></tr> <tr><td class='td1'>密码：</td><td><input type='password' name='upwd' /></td></tr> <tr><td class='td1'>头像：</td><td><input type='file' name='ulogo' accept='image/jpeg' /></td></tr> <tr><td> </td><td><input type='button' value='确定' onclick='formSubmit()' /></td></tr> <tr><td> </td><td><div id="msg"></div></td></tr> </table> </form> <iframe name="sendData" style="display:none"></iframe> <script type="text/javascript"> var frm = document.getElementById("myForm"); var msg = document.getElementById("msg"); function showMsg(str) { if (str == null){ msg.innerHTML = ""; } else { msg.innerHTML = str; } } function formSubmit() { var uname = frm.uname.value; if (uname == "") { showMsg("请输入用户名！"); frm.uname.focus(); return; } var upwd = frm.upwd.value; if (upwd == "") { showMsg("请输入密码！"); frm.upwd.focus(); return; } var ulogo = frm.ulogo.value; if (ulogo == "") { showMsg("请选择用户头像！"); frm.ulogo.focus(); return; } if (frm.ulogo.files[0].size > 1024 * 75) { showMsg("图像大小不能超过75K"); return; } showMsg("数据提交中 ..."); frm.method = "POST"; frm.action = "http://blog.elight.cn/other/submit.php"; frm.target = "sendData"; frm.submit(); //表单提交 } </script> </body> </html>

数据接收端代码：
<?php //数据处理 // ... $rel = '用户“' . $_POST['uname'] . '”的数据处理成功！'; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta charset="UTF-8"> </head> <body> <script type="text/javascript"> //向父页面反馈信息 parent.showMsg("<?php echo $rel;?>"); </script> </body> </html>

分享到： QQ空间新浪微博腾讯微博微信更多

« iOS开发之跑马灯 | Android编译报错怎么看详细信息»

用iframe模拟ajax实现表单无刷新提交

日历

存档

最新评论

链接

搜索