table 的form序列化提交 ,及json 处理list<对象>

最新推荐文章于 2023-03-30 22:35:13 发布

原创最新推荐文章于 2023-03-30 22:35:13 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#table 的form序列化提交 #及json 处理list对象

本文介绍了一个使用HTML表单收集数据并将其序列化为JSON格式的过程。具体包括前端如何通过JavaScript将表单数据转换成JSON字符串，以及后端如何解析这些数据。涉及到的关键技术有HTML表单元素、Spring框架的国际化支持、jQuery的Ajax调用等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

部分代码如下：

form如下：

<form id="formMessage"  method="post" enctype="application/x-www-form-urlencoded">

    <table id="menuList" data-mobile-responsive="true" class="table table-hover table-responsive" >

      <thead>
        <tr>

          <th>
            <div class="th-inner "><spring:message code="sid"/></div>
          </th>
          <th>
            <div class="th-inner " style="width: 130px"><spring:message code="orderNumber"/></div>
          </th>
          <th>
            <div class="th-inner "><spring:message code="hawbCode"/></div>
          </th>
          <th>
            <div class="th-inner "><spring:message code="mawbCode"/></div>
          </th>
          <th>
            <div class="th-inner "><spring:message code="pieces"/></div>
          </th>
          
        </tr>
      </thead>
      <tbody id="orderMenuList">

      <c:forEach items="${orderDetailsList}" var="orderDetails" varStatus="i">

        <c:choose>
          <c:when test="${orderDetails.orderInvoiceName == '0'}">
            <tr id="option${i.index + 1}">
          </c:when>
          <c:otherwise>
            <tr id="option${i.index + 1}" bgcolor="#7CCD7C">
          </c:otherwise>
        </c:choose>

        <%--<tr id="option${i.index + 1}">--%><%--<tr id="option${i.index + 1}" bgcolor="#7CCD7C">--%>
          <td>${i.index + 1}<input name="orderInvoiceName"  type="text"  style="border:0;background:transparent;display: none" value="${orderDetails.orderInvoiceName}"/></td>
          <td><input name="orderCode" type="text"  style="border:0;background:transparent;" value="${orderDetails.orderCode}"/></td>
          <td><input name="orderHawbcode" type="text"  style="border:0;background:transparent;" value="${orderDetails.orderHawbcode}"/></td>
          <td><input name="orderMawbcode" type="text"  style="border:0;background:transparent;" value="${orderDetails.orderMawbcode}"/></td>
          <td><input name="orderPieces" type="text"  style="border:0;background:transparent;" value="${orderDetails.orderPieces}"/></td>
          
        </tr>
      </c:forEach>

      </tbody>
    </table>
</form>

js触发事件如下：

function orderMessage(){
    var forms = $("#formMessage").serialize();
    var json = "[{";
    var msg2 = forms.split("&");   //先以“&”符号进行分割，得到一个key=value形式的数组
    var t = false;
    for(var i = 0; i<msg2.length; i++){
      var msg3 = msg2[i].split("=");  //再以“=”进行分割，得到key，value形式的数组
      for(var j = 0; j<msg3.length; j++){
        json+="\""+msg3[j]+"\"";
        if(j+1 != msg3.length){
          json+=":";
        }
        if(t){
          json+="}";
          if(i+1 != msg2.length){  //表示是否到了当前行的最后一列
            json+=",{";
          }
          t=false;
        }
        if(msg3[j] == "orderRemark"){  //这里的“canshu5”是你的表格的最后一列的input标签的name值，表示是否到了当前行的最后一个input
          t = true;
        }
      }
      if(!msg2[i].match("orderRemark")){  //同上
        json+=",";
      }

    }
    json+="]";
    //alert(json);

//decodeURIComponent针对中文序列化乱码处理

    $.ajax({
      url:"/***/***",
      type:"post",
      data:{messageData:decodeURIComponent(json,true)},
      dataType: 'json',
      cache: false,
/*      processData: false,
      contentType: false,*/
      success:function(data){
        alert("操作成功！");

      },
      error:function(e){
        alert("网络错误，请重试！！");
      }
    });
  }

后台处理json,:

String dataMessage = request.getParameter("messageData");

List<对象> list = JSON.parseArray(dataMessage , 对象.class);