ajax 收集表单,ajax无刷新方式收集表单并提交表单

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&period;js插件结合一般处理文件实现Ajax无刷新上传

先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

ajax无刷新上传图片

页面:

& ...

关于Ajax无刷新分页技术的一些研究 c&num;

关于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 冲刺报告&lpar;9&sol;10&rpar;

Alpha 冲刺报告(9/10) 队名:洛基小队 峻雄(组长) 已完成:角色属性功能的测试版 明日计划:准备α版本的ppt 剩余任务:尽量完成角色属性功能 困难:缺乏编程经验,很难自己独立完成编写,只 ...

bzoj2120&colon; 数颜色 带修莫队

墨墨购买了一套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 ...