srcpage

var q=new XMLHttpRequest();
var data='usr=weidiao&pwd=haha';
data=encodeURI(data);
var url="xxxxxx";
q.open("post",url);
q.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
q.onreadystatechange=function(){

}
q.send(data);

一般来说form中存放数据的控件主要是<input>,而这个<input>type很多,如 ‘submit’,‘hidden’, ‘password’, ‘text’,‘checkbox’, ‘radio’等。因此第一步我们要做的就是先写一个方法,将将form中各种类型的<input>将数据值给抠出来。具体见如下代码:

  1. //获取指定form中的所有的<input>对象
  2. function getElements(formId) {
  3. var form = document.getElementById(id);
  4. var elements = new Array();
  5. var tagElements = form.getElementsByTagName('input');
  6. for (var j = 0; j < tagElements.length; j++)
  7. elements.push(tagElements[j]);
  8. return elements;
  9. }

接着我们需要获取每个input对象的name-value对,代码如下:

  1. function inputSelector(element) {
  2. if (element.checked)
  3. return [element.name, element.value];
  4. }
  5. function input(element) {
  6. switch (element.type.toLowerCase()) {
  7. case 'submit':
  8. case 'hidden':
  9. case 'password':
  10. case 'text':
  11. return [element.name, element.value];
  12. case 'checkbox':
  13. case 'radio':
  14. return inputSelector(element);
  15. }
  16. return false;
  17. }

接着我们就可以将所有这些input对象中的name-value对以图1-5中POSTDATA那样的格式组织起来。代码如下:

  1. function serializeElement(element) {
  2. var method = element.tagName.toLowerCase();
  3. var parameter = input(element);
  4. if (parameter) {
  5. var key = encodeURIComponent(parameter[0]);
  6. if (key.length == 0) return;
  7. if (parameter[1].constructor != Array)
  8. parameter[1] = [parameter[1]];
  9. var values = parameter[1];
  10. var results = [];
  11. for (var i=0; i<values.length; i++) {
  12. results.push(key + '=' + encodeURIComponent(values[i]));
  13. }
  14. return results.join('&');
  15. }
  16. }
  17. function serializeForm(formId) {
  18. var elements = getElements(formId);
  19. var queryComponents = new Array();
  20. for (var i = 0; i < elements.length; i++) {
  21. var queryComponent = serializeElement(elements[i]);
  22. if (queryComponent)
  23. queryComponents.push(queryComponent);
  24. }
  25. return queryComponents.join('&');
  26. }

ajax post(copy part)的更多相关文章

  1. 超简单!80行代码实现Google日历(拖放、移动、AJAX)

    介绍 本实例介绍使用DayPilot Lite for ASP.NET MVC library 类来实现类google日历效果. 在线实例 天视图  星期视图  拖放调整  拖放移动  行代码来实现a ...

  2. 超级简单!80行代码实现Google日历(拖放、移动、AJAX)

    行代码实现Google日历 Introduction 本实例介绍使用DayPilot Lite for ASP.NET MVC library 类来实现类google日历效果. 在线实例 天视图  星 ...

  3. VSCompile

    VS2012加载失败 No exports were found that match the constraint 开始->运行->devenv.exe /resetuserdata-& ...

  4. HEC-ResSim原文档

              HEC-ResSim Reservoir System Simulation             User's Manual       Version 3.1 May 201 ...

  5. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  6. 通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  7. Struts2与Ajax的整合

    整合: 导入jar包 sturts2-json-plugin-2.1.8.1.jar 说明: 在该jar包中有struts-plugin.xml文件 <struts>            ...

  8. ajax的status为201依然触发jquery的error事件的问题

    昨天在调试一个ajax的时候发现,即使status是201,仍然会触发jquery的error事件.statusText是"parseerror". 通过在stackoverflo ...

  9. CS0234: 命名空间“System.Web.Mvc”中不存在类型或命名空间名称“Html、Ajax”(是否缺少程序集引用?)

    从SVN上down下来的程序,编译报了一大堆的错,发现是缺少引用,但是明明引用了,后来打开引用,发现system.web.mvc这个引用打着叹号,如图: 后来重新引用了本机的system.web.mv ...

随机推荐

  1. parted在2T以上硬盘上分区操作

    parted分区生产环境如何使用? 1)pertend一般用于当硬盘(raid后)大于2t的时候分区操作,2t以下还是用fdisk分区 2)使用parted一般操作系统都已经安装好了 3)大于2t的因 ...

  2. linux 进程管理相关内容

    简介 当我们运行程序时,Linux会为程序创建一个特殊的环境,该环境包含程序运行需要的所有资源,以保证程序能够独立运行,不受其他程序的干扰.这个特殊的环境就称为进程. 每个 Linux 命令都与系统中 ...

  3. golang和vim-go安装配置

    一.Golang安装 1.下载golang安装包http://golangtc.com/download,我这里下载的是go1.6rc2.linux-amd64.tar.gz. 2.解压到安装目录,我 ...

  4. linux下 ^M

    在Linux下使用vi来查看一些在Windows下创建的文本文件,有时会发现在行尾有一些“^M”.有几种方法可以处理. 注意:在Linux下,可以通过ctrl+v,ctrl+m,打出^M字符.而却,以 ...

  5. 关于C语言中的位域

    有些信息在存储时,并不需要占用一个完整的字节, 而只需占几个或一个二进制位.例如在存放一个开关量时,只有0和1 两种状态,用一位二进位即可.为了节省存储空间,并使处理简便,C语言提供了一种数据结构,称 ...

  6. C++浅析——继承类内存分布和虚析构函数

    继承类研究 1. Code 1.1 Cbase, CTEST为基类,CTest2为其继承类,并重新申明了基类中的同名变量 class CBase { public: int Data; CBase() ...

  7. C#基础----Linq之List<T>篇

    最近有用到List处理排序以及分页的问题.想想还是写一个博客记录一下.以下围绕Person类实现,Person类只有Name和Age两个属性   一.List<T>排序 1.1 List& ...

  8. 使用IntelliJ IDEA 编译开源的机器学习源码--Oryx

    What is Oryx? 大名鼎鼎的Sean Owen (http://www.linkedin.com/in/srowen) 正在 Cloudera 作为 Director of Data Sci ...

  9. VS设置程序集属性(文件的详细信息)

    适用范围 本文方法适用于:C#创建的控制台程序,WinForm,WPF等VS创建的.Net工程信息设置. 方法步骤 1.在 项目 上点击鼠标右键选择 属性 ,进入这个页面,点击 程序集信息(重点关注 ...

  10. u3d_shader_surface_shader_3

    参考http://my.oschina.net/u/138823/blog/181131 加了个凹凸贴图: 抱歉把女神苏菲做成这样. 一:Normal Texture的制作: 1.首先是Normal ...