纯js的ajax实现异步提交表单
2013-03-30 00:00
573 查看
很多时候需要异步提交表单,当表单太多是时候,一个个getElementById变得很不实际
当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行
只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单
实现如下(本例用POST方式提交,用php作为服务器脚本):
form.html:
ajax_form.js:
process.php:
测试如下:
提交前:
提交后:
当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行
只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单
实现如下(本例用POST方式提交,用php作为服务器脚本):
form.html:
<html> <head> <script type="text/javascript" src="ajax_form.js"></script> </head> <body> <form action="process.php" id="ajax_form"> Username:<input type="text" name="username"/><br> Password:<input type="password" name="password"/><br> Gender:<input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female<br> Interest:<input type="checkbox" name="interest[]" value="programing"/>Programing <input type="checkbox" name="interest[]" value="game"/>Game <input type="checkbox" name="interest[]" value="sport"/>Sport <input type="button" onclick="submitForm('ajax_form', 'tip')" value="Submit"> </form> <div id="tip"></div> </body> </html>
ajax_form.js:
function createXmlHttp() { var xmlHttp = null; try { //Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { //IE try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } function submitForm(formId, tipId) { var xmlHttp = createXmlHttp(); if(!xmlHttp) { alert("您的浏览器不支持AJAX!"); return 0; } var e = document.getElementById(formId); var tip = document.getElementById(tipId); var url = e.action; var inputs = e.elements; var postData = ""; for(var i=0; i<inputs.length; i++) { switch(inputs[i].type) { case "text": postData += inputs[i].name + "=" + inputs[i].value + "&"; break; case "password": postData += inputs[i].name + "=" + inputs[i].value + "&"; break; case "radio": if(inputs[i].checked) { postData += inputs[i].name + "=" + inputs[i].value + "&"; } break; case "checkbox": if(inputs[i].checked) { postData += inputs[i].name + "=" + inputs[i].value + "&"; } break; default: continue; } } postData += "t=" + Math.random(); xmlHttp.open("POST", url, true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { tip.innerHTML = xmlHttp.responseText; } } xmlHttp.send(postData); }
process.php:
<?php $text = "The data that you submit:"; $text .= "<br>Username: " . $_POST['username']; $text .= "<br>Password: " . $_POST['password']; $text .= "<br>Gender: " . $_POST['gender']; $text .= "<br>Interest:"; for($i=0; $i<count($_POST["interest"]); $i++) { $text .= " " . $_POST["interest"][$i]; } echo $text; ?>
测试如下:
提交前:
提交后:
相关文章推荐
- $.ajax 和 jquery.form.js实现表单异步提交
- 纯javascript的ajax实现php异步提交表单
- 【jQuery】Jquery.form.js实现表单异步提交以及文件上传(带进度条)
- 使用jQuery实现Ajax异步提交表单实现局部刷新
- 黄聪:Jquery+php+ajax实现表单异步提交,动态添加回复评论
- 不用ajax,采用隐藏iframe实现表单异步提交
- ajax+php+js实现异步刷新表单验证
- 使用jquery-form.js实现form表单的异步提交
- ajax中如何实现异步提交表单
- ajax异步表单提交,并实现文件上传
- 使用Jquery的Ajax异步提交有二进制数据的表单实现方案
- Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
- jquery-form.js实现文件表单ajax提交回调
- 纯javascript的ajax实现php异步提交表单的简单实例
- jQuery实现Ajax异步提交表单实现局部刷新
- jqeury中ajax的表单实现异步提交
- js 异步表单提交,图片上传,兼容异步模拟ajax技术
- ajax实现表单的异步提交
- 黄聪:Jquery+php+ajax实现表单异步提交,动态添加回复评论