使用原生javascript实现ajax提交form表单 - Go语言中文社区

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


使用原生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")
		br
		br
		label password:
        input(id="password",type="password",name="password")
        br
        br
        select(id="city",name="city")
            option(value=1) 北京
            option(value=2) 上海
        br
        br
        input(type="submit",value="测试ajax")

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

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

    每条数据以一个换行符做分隔"rn",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-data
                var sBoundary = "---------------------------" + Date.now().toString(16);
                xhr.setRequestHeader("Content-type",sBoundary);
                xhr.sendAsBinary("--" + sBoundary + "rn" + myForm.segments.join("--" + sBoundary + "rn") + "--" + sBoundary + "--rn");
            }else{
                //如果是application/x-www-form-urlencoded或者text/plain
                xhr.setRequestHeader("Content-type",myForm.contentType);
                xhr.send(myForm.segments.join(myForm.technique===1?"rn":"&"));
            }
        }
    }
    //处理文件上传完毕时做的操作
    function processUpload(event){
        //this.owner.segments[this.segmentIdx] += oFREvt.target.result + "rn";
        this.owener.segments[this.segIndex] = oFREvt.target.result + "rn";
        this.owner.status--;
        processSubmit(this.owner);
    }
    //status为0即所有图片都已经上传完毕,执行ajax
    function 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-data
    function 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+ ""rnContent-Type: " +oFile.type+ "rnrn");
                        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
                    //heheda
                    this.segments.push("Content-Disposition: form-data; name=""+oElement.name+""rnrn"+oElement.value+"rn");
                }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);
版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/u013158044/article/details/51171060
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢