使用原生javascript实现ajax提交form表单

============================

1 准备表单
首先我们需要编写一个html代码，这里我是采用nodejs里面的jade模板引擎来进行生成html代码的。

form(action="/ajaxTest2",method="post",enctype="text/plain",onsubmit="ajaxSubmit(this);return false;")label username:input(id="username",type="text",name="username")brbrlabel password:input(id="password",type="password",name="password")brbrselect(id="city",name="city")option(value=1) 北京option(value=2) 上海brbrinput(type="submit",value="测试ajax")

2 编写js代码
利用ajax自定义form提交的数据，做的事情，不如form提交简单。但是自定义form提交又比较灵活，可以做添加一些自己想要的功能。既然要自定义ajax的表单提交功能，我们就需要了解form提交的四种类型。

1 method=“get”
此格式要求的数据类型如下图所示

每条数据以一个换行符做分隔"\r\n",nodejs获取方法
req.query.*
2 method=“post”,enctype=“text/plain”
此格式要求的数据类型如下图所示

与get方式相似.nodejs获取方法
req.on(“data”,function(data){})
3 method=“post”,enctype=“application/x-www-form-urlencoded”
此格式要求的数据类型如下图所示

每条数据以&作为分隔符,jQuery.ajax();传递的数据就是这种类型
nodejs获取方法
req.body.username
4 method=“post”,enctype=“multipart/form-data”
此格式要求的数据类型如下图所示
input的name单独一行，然后空两行，写值，然后在是下一个值对.
nodejs获取方法
req.on(“data”,function(data){
});
了解了过程，以下便是实现代码

'use strict';if (!XMLHttpRequest.prototype.sendAsBinary) {XMLHttpRequest.prototype.sendAsBinary = function(sData) {var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);for (var nIdx = 0; nIdx < nBytes; nIdx++) {ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;}/* send as ArrayBufferView...: */this.send(ui8Data);/* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */};
}
void function(global){function ajaxComplete(){///成功if(this.statusCode==200){}}//提交function ajax(myForm){var xhr = new XMLHttpRequest();xhr.addEventListener("load", ajaxComplete);if(myForm.technique===0){//如果是get方式xhr.open("get",myForm.action.replace(/(?:\?.*)?$/,myForm.segments.length>0?"?"+myForm.segments.join("&"):"?"),true);xhr.send(null);} else{xhr.open("post",myForm.action,true);if(myForm.technique===3){//如果是multipart/form-datavar sBoundary = "---------------------------" + Date.now().toString(16);xhr.setRequestHeader("Content-type",sBoundary);xhr.sendAsBinary("--" + sBoundary + "\r\n" + myForm.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");}else{//如果是application/x-www-form-urlencoded或者text/plainxhr.setRequestHeader("Content-type",myForm.contentType);xhr.send(myForm.segments.join(myForm.technique===1?"\r\n":"&"));}}}//处理文件上传完毕时做的操作function processUpload(event){//this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";this.owener.segments[this.segIndex] = oFREvt.target.result + "\r\n";this.owner.status--;processSubmit(this.owner);}//status为0即所有图片都已经上传完毕，执行ajaxfunction processSubmit(myForm){if(myForm.status>0){return;}ajax(myForm);}//处理text/plain的编码function plainScape(text){//$&表示被替换的文本return text.replace(/[\s\=\\]/g,"\\$&");}//上传数据到浏览器// 0 get// 1 text/plain// 2 application/x-www-form-urlencoded// 3 multipart/form-datafunction submitData(form){var elements = form.elements;var i,j,oElement,oType,oFile,reader;var isPost = form.method.toLowerCase()==="post"; //若没有指定method，默认按get操作;this.action = form.action;this.contentType = isPost && form.enctype ? form.enctype : "application\/x-www-form-urlencoded";this.technique = isPost?this.contentType==="text/plain"?1:this.contentType==="application/x-www-form-urlencoded"?2:3:0;this.segments = [];this.status = 0;//还未上传的文件量var fFilter = this.technique === 1?plainScape:global.encodeURIComponent;for(i=0;i<elements.length;i++){oElement = elements[i];if(!oElement.hasAttribute("name")){continue;}//如果该元素没有name属性，则自动跳过oType = oElement.nodeName.toLowerCase()==="input"?oElement.type:"text";console.log(oElement);if(oType === "file"){//限制只能以post方式上传图片if(isPost&&this.technique===3) {//如果是multipart/form-data 则传文件数据for(j=0;j<oElement.files.length;j++){oFile = oElement.files[j];reader = new FileReader();reader.owner = this;//reader.segIndex = this.segments.length;this.status++;this.segments.push("Content-Disposition: form-data; name=\"" +oElement.name+ "\"; filename=\"" +oFile.name+ "\"\r\nContent-Type: " +oFile.type+ "\r\n\r\n");reader.onload = processUpload;//文件读取完之后执行reader.readAsBinaryString(oFile);}}else{//不是，则只传文件名for(j=0;j<elements.files.length;j++){oFile = elements.files[j];this.segments.push(fFilter(oElement.name)+"="+fFilter(oFile.name));}}}else if((oType!=="radio"&&oType!=="checkbox")||oType.checked){//处理类型不是file的表单数据,if(this.technique === 3){//Content-Disposition: form-data; name=aa//hehedathis.segments.push("Content-Disposition: form-data; name=\""+oElement.name+"\"\r\n\r\n"+oElement.value+"\r\n");}else{this.segments.push(fFilter(oElement.name)+"="+fFilter(oElement.value));}}}processSubmit(this);}var ajaxSubmit = function(formElement){if(formElement.action === ""){return undefined;}submitData.call(ajaxSubmit,formElement);}Object.defineProperty(global,"ajaxSubmit",{value: ajaxSubmit,configurable: true});
}(this);

使用原生javascript实现ajax提交form表单相关推荐

通过php jq ajax 提交form表单
参考http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2013/0619/13568.html html <div id="con ...
使用ajax提交form表单，包括ajax文件上传转http://www.cnblogs.com/zhuxiaojie/p/4783939.html...
使用ajax提交form表单,包括ajax文件上传前言使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){... },&quo ...
学习日志day45（2021-09-09）（1、有道翻译API使用json格式数据 2、JSONP 3、Ajax提交form表单 4、Web Uploader）
学习内容:学习JavaWeb(Day45) 1.有道翻译API使用json格式数据 2.JSONP 3.Ajax提交form表单 4.Web Uploader 1.有道翻译API使用json格式数据 ...
ajax提交form表单到数据库(无刷新)
在静态页面提交表单到数据库很简单就是单纯的 <form action="test.php" method="post"> </form> ...
form表单提交以及用Jquery实现ajax提交form表单
在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交,每一个input标签都 ...
jquery的ajax提交form表单方式总结
方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModif ...
SpringMVC 用对象接收 ajax提交form表单
SpringMVC 用对象接收 ajax提交form表单转载于:http://www.cnblogs.com/klwyrn/p/5955152.html 第一种方法(简单易用,防蚊虫): 1.1 ...
ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
利用ajax提交form表单数据
利用thymeleaf引擎创建的html中,使用了adminLTE模板,ajax提交form表单数据,本以为很容易实现,却遇到了很多问题,这里进行总结. 1.get方式提交通过serialize() ...

使用原生javascript实现ajax提交form表单

使用原生javascript实现ajax提交form表单

使用原生javascript实现ajax提交form表单相关推荐

最新文章

热门文章