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. read

    从标准输入读入一行内容并以空格为分隔符赋值给变量,如果输入的内容过多,则把剩下的所有内容都赋值给最后一个变量 $read A B C 123 456 789 101 $echo "$A&qu ...

  2. C/C++ sizeof函数解析——解决sizeof求结构体大小的问题

    C/C++中不同数据类型所占用的内存大小 32位                 64位 char               1                    1 int           ...

  3. checkbox勾选判断

    var xieYi=document.getElementById("xieYi"); if(!xieYi.checked){ alert("请先阅读并勾选购买协议!&q ...

  4. [转]教你一招 - 如何给nopcommerce增加新闻类别模块

    本文转自:http://www.nopchina.net/post/nopchina-teach-newscategory.html nopcommerce的新闻模块一直都没有新闻类别,但是很多情况下 ...

  5. Java的注解机制——Spring自动装配的实现原理

    http://www.cnblogs.com/Johness/archive/2013/04/17/3026689.html

  6. 穷举、迭代、以及while代替for循环的使用

    for循环的穷举: 就是所有情况走一遍,使用if筛选出符合的情况. while循环分为2个格式 (1)先判断再做while(){}(2)不管对错,先做了在判断do{}whlie() 百鸡百钱的whil ...

  7. code blocks 如何实现一键代码格式化

    问题:code blocks 如何实现一键代码格式化 解答:直接右键,选择format use ASstyle

  8. vue-route+webpack部署单页路由项目,访问刷新出现404问题

    问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所 ...

  9. Distribute numbers to two “containers” and minimize their difference of sum

    it can be solved by Dynamical Programming.Here are some useful link: Tutorial and Code: http://www.c ...

  10. Java Web开发Tomcat中三种部署项目的方法

    第一种方法:在tomcat中的conf目录中,在server.xml中的,<host/>节点中添加: <Context path="/hello" docBase ...