前后端分离，动态添加文本框以及回填数据

最近在做前后端分离的数据交互。在这里记录一下前后端分离的交互实现以及遇到的问题及解决方法。

1.首先是解决与后台跨域通信的问题
可以参考我的上一篇博客利用工具跨域通信（发送请求数据）等

2.保存用户输入的数据

这里使用formdata对象发送数据，使用formdata的set方法来处理新添加的输入框的内容。因为动态添加的输入框，所以使用set方法为输入框添名值对再将这些名值对追加到formdata之前获取的数据里面。
给speakerArray数组添加的为对象，后面使用JSON.stringify转换成了json字符串（也就是添加到set方法里的 value）。（这里为什么value值是字符串 数组呢,,,,,,因为后台是这样保存数据的=。=）

$("#save").click(function(){
             var data = new FormData(document.querySelector("#contactForm2")); 
                var speakerArray=[];
                for(var i=0,length=$(speaker).length;i<length;i++){
                     speakerArray[i]={};
                    speakerArray[i].speakPerson=$(speaker[i]).val();
                    speakerArray[i].speakContent=$(speakerCont[i]).val();
                }
                data.set("speakContent",JSON.stringify(speakerArray));   
            $.ajax({
            url:"http://***.***.***/meeting/save",
            type:"post",
            data:data,
            dataType:"json",
            processData: false,
            contentType: false,
            success:function(data){
                if(data.status==0){
                    alert(data.msg);
                    window.location.href="metting.html"
                }else{
                    alert("保存失败");
                }
            },
            error:function(e){ 
                alert("错误！！");
            }
            });   
        });

3.添加输入框
用户点击，新增一组输入框。
全部是全是操作节点 ，，代码看着比较多。可以选择用jQuery写，或者 使用innerHTML添加,这样看起来就会简洁些。

var add=document.getElementsByClassName("addspeaker");
            var Cont=document.getElementById("deletespeak");
                add[0].onclick=function(){
                    var speak       =document.createElement("div");
                    var p           =document.createElement("p");
                    var test        =document.createTextNode("发言者:");
                    var input       =document.createElement("input");
                    var speakContent=document.createElement("div");
                    var textarea    =document.createElement("textarea");
                    speak.setAttribute("classname",'speak');
                    speak.setAttribute("class",'speak');
                    speak.appendChild(p);
                    speak.appendChild(speakContent);
                    p.appendChild(test);
                    input.setAttribute("class",'speaker');
                    input.setAttribute("type",'text');
                    p.appendChild(input);
                    speakContent.setAttribute("class",'form-group-inner');
                    speakContent.appendChild(textarea);
                    textarea.setAttribute("placeholder","发言内容");
                    Cont.appendChild(speak);

                }

4.获取值，回填
用户刷新界面，数据回填在界面上。
使用JSON.parse()将动态添加的发送给后台的又返回前台的json字符串转换为对象，让js能够解析。
循环得到的数组，获取长度，得到几个值就添加几个输入框，然后给输入框赋值。这里因为我的变量是在函数最开始的时候定义的，而输入框是后面循环判断添加的，有个先后定义的顺序。所以在for循环内重新定义了变量。

以上方法仅供参考，谢谢。