//js代码
function checkCode(num){
var typeid = $("#typeid").val();
if(typeid == ""){
alert("请选择信息类别");
return false ;
}
var i = 1;
for(i=1;i<=num;i++){ //判断每一行是否填写相关的值
var dataname = $("input[name='dataname"+i+"']").val();
var isopen=$("input:radio[name='isopen"+i+"']:checked").val();
if(dataname == ""){
alert("请输入数据名称");
return false;
}
}
return true;
}
//自动新增一行
$(function(){
$( ".table1" ).on( "click",".add", function() {
var num=$(".table1").find(".clone-tr").length;
if(checkCode(num)){
ht = $(this).closest(".clone-tr").clone(true);
// var num=$(".table1").find(".clone-tr").length;
if(num<20){
var check=$(ht).find(".check-box");
var inp=$(ht).find("input[type='text']");
var num2 = num + 1
$(check).eq(0).find("input[type='radio']").attr("name", 'openway'+num2);
$(check).eq(1).find("input[type='radio']").attr("name", 'isopen'+num2);
inp.val("");
inp.filter(function(){
return $(this).attr("name") == "dataname1";
}).attr("name", 'dataname'+num2);
inp.filter(function(){
return $(this).attr("name") == "datacontent1";
}).attr("name", 'datacontent'+num2);
inp.filter(function(){
return $(this).attr("name") == "openInterface1";
}).attr("name", 'openInterface'+num2);
inp.filter(function(){
return $(this).attr("name") == "noOpenInterface1";
}).attr("name", 'noOpenInterface'+num2);
$(ht).find(".operate").remove();
$(this).closest(".table1 tbody").prepend(ht);
$("#numid").val(num);
$("#num2id").val(num2); //保存添加后的tr数目
}
}
});
$( ".table1" ).on( "click",".delete", function() {
var num=$(".table1").find(".clone-tr").length;
if(num>1){
$(this).closest(".table1 tbody").find("tr").eq(0).remove();
}
});
$("#submitid").click(submitAnswer);
});
//拼json 串
function writeToJson(num){
var i = 1;
var jsonData = "[";
for(i=1;i<=num;i++){
var dataname = $("input[name='dataname"+i+"']").val();
var datacontent = $("input[name='datacontent"+i+"']").val();
var openInterface = $("input[name='openInterface"+i+"']").val();
var noOpenInterface = $("input[name='noOpenInterface"+i+"']").val();
var openway=$("input:radio[name='openway"+i+"']:checked").val();
var isopen=$("input:radio[name='isopen"+i+"']:checked").val();
if(i == num ){
jsonData += "{'dataname':'"+dataname+"','datacontent':'"+datacontent+"','openway':'"+openway+"','isopen':'"+isopen+"','openInterface':'"+openInterface+"','noOpenInterface':'"+noOpenInterface+"'}";
}else{
jsonData += "{'dataname':'"+dataname+"','datacontent':'"+datacontent+"','openway':'"+openway+"','isopen':'"+isopen+"','openInterface':'"+openInterface+"','noOpenInterface':'"+noOpenInterface+"'},";
}
}
jsonData += "]" ;
//alert("--------"+jsonData);
return jsonData ;
}
function submitAnswer(){
var num = $("#num2id").val();
if(num == ""){
num = 1;
}
if(checkCode(num)){
var cstr = writeToJson(num); // 拼 json 串
var typeid = $("#typeid").val();
$.ajax({
url: "/saveSurWXData.do",
cache: false,
type: "POST",
dataType: "json",
data: {
"content":cstr,
"typeid":typeid
},
success:function(data){
var a = data.topicId; //后台返回json到前台后处理
$("#topicId").val(a);
alert("保存成功");
window.location.reload();
},
error: function(){alert("保存失败");}
});
}
}
jsp 页面:
<tr class="clone-tr">
<td><input type="text" class="inp" name="dataname1" placeholder="请输入"/></td>
<td><input type="text" class="inp" name="datacontent1" placeholder="请输入"/></td>
<td>
<div class="check-box">
<label><input name="isopen1" type="radio" value="是" checked>是</label>
<label><input type="radio" name="isopen1" value="否">否</label>
</div>
</td>
<td>
<p class="box-b">
<input style="width: 160px;" type="text" class="inp" name="noOpenInterface1" placeholder="请输入"/>
</p>
</td>
<td class="btn-operate"><span class="operate"><a class="add">+</a><a class="delete">-</a></span> </td>
</tr>
后台处理json 并返回值:
String jsonStr = this.getRequest().getParameter("content");
JSONArray jsonArray = JSONArray.fromObject(jsonStr);
for(int i=0;i<jsonArray.size(); i++){
JSONObject jsonJ = jsonArray.getJSONObject(i);
String dataname = jsonJ.getString("dataname");
String datacontent = jsonJ.getString("datacontent");
String openway = jsonJ.getString("openway");
String isopen = jsonJ.getString("isopen");
String openInterface = jsonJ.getString("openInterface");
String openperiod = jsonJ.getString("noOpenInterface");
}
//返回json 到前台
JSONObject jsonObject = new JSONObject();
jsonObject.put("topicId", topicId);
this.getPrintWriter(jsonObject);
private void getPrintWriter(Object object) {
try {
out = this.getResponse().getWriter();
out.print(object);
out.close();
} catch (IOException e) {
System.out.println("error:"+e.getMessage());
}
}
当然还有 struts 的配置:
<action name="*" class="com.*action.*" method="*">
<result name="success" type="json"></result>
</action>