ajax post(copy part)
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>将数据值给抠出来。具体见如下代码:
- //获取指定form中的所有的<input>对象
- function getElements(formId) {
- var form = document.getElementById(id);
- var elements = new Array();
- var tagElements = form.getElementsByTagName('input');
- for (var j = 0; j < tagElements.length; j++)
- elements.push(tagElements[j]);
- return elements;
- }
接着我们需要获取每个input对象的name-value对,代码如下:
- function inputSelector(element) {
- if (element.checked)
- return [element.name, element.value];
- }
- function input(element) {
- switch (element.type.toLowerCase()) {
- case 'submit':
- case 'hidden':
- case 'password':
- case 'text':
- return [element.name, element.value];
- case 'checkbox':
- case 'radio':
- return inputSelector(element);
- }
- return false;
- }
接着我们就可以将所有这些input对象中的name-value对以图1-5中POSTDATA那样的格式组织起来。代码如下:
- function serializeElement(element) {
- var method = element.tagName.toLowerCase();
- var parameter = input(element);
- if (parameter) {
- var key = encodeURIComponent(parameter[0]);
- if (key.length == 0) return;
- if (parameter[1].constructor != Array)
- parameter[1] = [parameter[1]];
- var values = parameter[1];
- var results = [];
- for (var i=0; i<values.length; i++) {
- results.push(key + '=' + encodeURIComponent(values[i]));
- }
- return results.join('&');
- }
- }
- function serializeForm(formId) {
- var elements = getElements(formId);
- var queryComponents = new Array();
- for (var i = 0; i < elements.length; i++) {
- var queryComponent = serializeElement(elements[i]);
- if (queryComponent)
- queryComponents.push(queryComponent);
- }
- return queryComponents.join('&');
- }
ajax post(copy part)的更多相关文章
- 超简单!80行代码实现Google日历(拖放、移动、AJAX)
介绍 本实例介绍使用DayPilot Lite for ASP.NET MVC library 类来实现类google日历效果. 在线实例 天视图 星期视图 拖放调整 拖放移动 行代码来实现a ...
- 超级简单!80行代码实现Google日历(拖放、移动、AJAX)
行代码实现Google日历 Introduction 本实例介绍使用DayPilot Lite for ASP.NET MVC library 类来实现类google日历效果. 在线实例 天视图 星 ...
- VSCompile
VS2012加载失败 No exports were found that match the constraint 开始->运行->devenv.exe /resetuserdata-& ...
- HEC-ResSim原文档
HEC-ResSim Reservoir System Simulation User's Manual Version 3.1 May 201 ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- Struts2与Ajax的整合
整合: 导入jar包 sturts2-json-plugin-2.1.8.1.jar 说明: 在该jar包中有struts-plugin.xml文件 <struts> ...
- ajax的status为201依然触发jquery的error事件的问题
昨天在调试一个ajax的时候发现,即使status是201,仍然会触发jquery的error事件.statusText是"parseerror". 通过在stackoverflo ...
- CS0234: 命名空间“System.Web.Mvc”中不存在类型或命名空间名称“Html、Ajax”(是否缺少程序集引用?)
从SVN上down下来的程序,编译报了一大堆的错,发现是缺少引用,但是明明引用了,后来打开引用,发现system.web.mvc这个引用打着叹号,如图: 后来重新引用了本机的system.web.mv ...
随机推荐
- read
从标准输入读入一行内容并以空格为分隔符赋值给变量,如果输入的内容过多,则把剩下的所有内容都赋值给最后一个变量 $read A B C 123 456 789 101 $echo "$A&qu ...
- C/C++ sizeof函数解析——解决sizeof求结构体大小的问题
C/C++中不同数据类型所占用的内存大小 32位 64位 char 1 1 int ...
- checkbox勾选判断
var xieYi=document.getElementById("xieYi"); if(!xieYi.checked){ alert("请先阅读并勾选购买协议!&q ...
- [转]教你一招 - 如何给nopcommerce增加新闻类别模块
本文转自:http://www.nopchina.net/post/nopchina-teach-newscategory.html nopcommerce的新闻模块一直都没有新闻类别,但是很多情况下 ...
- Java的注解机制——Spring自动装配的实现原理
http://www.cnblogs.com/Johness/archive/2013/04/17/3026689.html
- 穷举、迭代、以及while代替for循环的使用
for循环的穷举: 就是所有情况走一遍,使用if筛选出符合的情况. while循环分为2个格式 (1)先判断再做while(){}(2)不管对错,先做了在判断do{}whlie() 百鸡百钱的whil ...
- code blocks 如何实现一键代码格式化
问题:code blocks 如何实现一键代码格式化 解答:直接右键,选择format use ASstyle
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所 ...
- 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 ...
- Java Web开发Tomcat中三种部署项目的方法
第一种方法:在tomcat中的conf目录中,在server.xml中的,<host/>节点中添加: <Context path="/hello" docBase ...