ajax无刷新方式收集表单有两种方式,
一个是使用html5的FormData。一个是传统的方式。
一,FormData,在主流的浏览器中可以用,IE不好用啊。
另外,FormData使用有两个条件,第一,input里面需要有name属性;第二,不需要用到header头。
//给form表单制作一个提交事件onsubmit
window.onload = function(){
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(evt){
//①利用FromData表单数据对象,快速搜集表单数据
var fd = new FormData(form);
//alert(info);
//②ajax把收集好的信息传递给服务器
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
};
xhr.open('POST','register.php');
//xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(fd);
//阻止浏览器默认动作
evt.preventDefault();
//return false;
}
}
二,传统方式。
//给form表单制作一个提交事件onsubmit
window.onload = function(){
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(evt){
//①收集form表单信息
var username = document.getElementById('username').value;
var userpass = document.getElementById('userpass').value;
var useremail = document.getElementById('useremail').value;
var info = 'username='+username+'&userpass='+userpass+'&useremail='+useremail;//发送请求字符串
//alert(info);
//②ajax把收集好的信息传递给服务器
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
};
xhr.open('POST','register.php');
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(info);
//阻止浏览器默认动作
evt.preventDefault();
//return false;
}
}
另外,写一个form表单。
用户名:
密码:
邮箱:
传值到一个php文件
//搜集信息
print_r($_POST);
?>
就这么简单。
ajax无刷新方式对form表单进行赋值!
/** * 把json数据填充到from表单中 */
用户名:< ...DWZ框架Ajax无刷新表单提交处理流程
DWZ框架Ajax无刷新表单提交处理流程是: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数根据这个json数据做相应 ...
jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: quo ...
Ajax无刷新提交表单和显示
ajax无刷新表单提交: //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...
ajax无刷新上传图片
页面:
& ...关于Ajax无刷新分页技术的一些研究 c#
关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...
随机推荐
11月8日PHP练习《留言板》
一.要求 二.示例页面 三.网页代码及网页显示 1.denglu.php 登录页面 /p>
Java Web之请求和响应
Servlet最主要作用就是处理客户端请求并作出回应,为此,针对每次请求,Web容器在调用service()之前都会创建两个对象,分别是HttpServletRequest和HttpServletRe ...
uva 10534
一开始WA了 参考了一下 求正反两个方向的最长上升子序列 并分别记录在两个数组中 最后求最大值 #include #include
解决p4c安装时protobuf未定义引用的错误
安装好p4c的依赖之后,执行make -j2时出现以下问题: undefined references to `google::protobuf::internal::LogMessage::oper ...
div左边固定宽度,右边自适应宽度
样式:
Alpha 冲刺报告(9/10)
Alpha 冲刺报告(9/10) 队名:洛基小队 峻雄(组长) 已完成:角色属性功能的测试版 明日计划:准备α版本的ppt 剩余任务:尽量完成角色属性功能 困难:缺乏编程经验,很难自己独立完成编写,只 ...
bzoj2120: 数颜色 带修莫队
墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2. R P ...
KVM虚拟机无法启动
一.启动虚拟机报错: [root@KVM ~]# virsh start node-mssql-test01 error: Failed to start domain node-mssql-test ...
Centos中配置环境变量
以Java的开发环境Jdk为例. 将jdk-9.0.1放置在/usr/local下(UNIX规范),然后我们将jdk配置到环境变量中去. $ mv jdk- /usr/local $ vim /etc ...
CS231n笔记列表
课程基础1:Numpy Tutorial 课程基础2:Scipy Matplotlib 1.1 图像分类和Nearest Neighbor分类器 1.2 k-Nearest Neighbor分类器 1 ...