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

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

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循环内重新定义了变量。



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