Question

我有一个7步表单，这是显示用户在以前页面中输入的所有信息的最后一步。使用jQuery将所有数据动态附加到每个<td class="table_info_ans">。

我需要将这些数据包装成如下所示的json格式并将其发送到后端：

{
  "personal": {
    "gender": "F",
    "firstName": "Heeeeey",
    "lastName": "Beauty",
    "localName": "Girl",
    "birthday": "1992/10/28"
  },
  "interests": {
    "destinations": [
      "UK",
      "USA",
      "CA"
    ],
   }
 }

任何方法都可以做到这一点？表结构如下：

<form action='/student-registration/process'>
    <hr>
    <div class="blue_font_title">ABOUT YOU
       <div class="link_page link_page_1" data-hook="form_step1"><span class="page_back_arrow"></span></div>
    </div>

    <table class="info_table" id="personal">
       <tbody>
          <tr>
            <td class="table_info_title">Gender:</td>
            <td class="table_info_ans student_gender" name="gender"></td>
          </tr>
          <tr>
            <td class="table_info_title">Local name:</td>
            <td class="table_info_ans student_local_name" name="localName"></td>
          </tr>
          <tr>
            <td class="table_info_title">First name:</td>
            <td class="table_info_ans student_eng_firstname" name="firstName"></td>
          </tr>
          <tr>
             <td class="table_info_title">Last name:</td>
             <td class="table_info_ans student_eng_lastname" name="lastName"></td>
          </tr>
          <tr>
             <td class="table_info_title">Birthday:</td>
             <td class="table_info_ans student_birthday" name="birthday"></td>
          </tr>
      </tbody>
  </table>
  <hr>
  <div class="blue_font_title">COUNTRY AND TIME YOU WANT TO GO
     <div class="link_page link_page_2" data-hook="form_step2"><span class="page_back_arrow"></span></div>
  </div>
  <table class="info_table" id="interest">
     <tbody>
        <tr>
           <td class="table_info_title">Destination:</td>
           <td class="table_info_ans student_study_destination"></td>
        </tr>
               ...                        
      </tbody>
   </table>
   <button type="submit" id="submit_button" class="submit_button">SUBMIT YOUR PROFILE</button>

现在，我试图将这些数据包装成我想要的格式....

var personal_title_arr = [];
var personal_ans_arr = [];
var obj_per = {};
$('#personal tr').each(function() {
  var personal_title = $(this).find('.table_info_ans').attr('name');
  var personal_ans = $(this).find('.table_info_ans').text();    

  personal_title_arr.push(personal_title);
  personal_ans_arr.push(personal_ans);
});

for (var i = 0; i < personal_title_arr.length; i++) {
    obj_per[personal_title_arr[i]] = personal_ans_arr[i];
}
var asJSON_per = JSON.stringify(obj_per);

因为这种形式有四个表，所以我必须手动将它们包装四次。我认为我做的方式非常荒谬.....我有什么技巧可以循环一次吗？

Answer 1

Following will work in javascript. Try this:

Change the table as :

<table class="info_table" id="personal" data-id="personal">
   <tbody>
      <tr>
        <td class="table_info_title">Gender:</td>
        <td class="table_info_ans student_gender" name="gender">F</td>
      </tr>
      <tr>
        <td class="table_info_title">Local name:</td>
        <td class="table_info_ans student_local_name" name="localName">Heeey</td>
      </tr>
      <tr>
        <td class="table_info_title">First name:</td>
        <td class="table_info_ans student_eng_firstname" name="firstName">Beauty</td>
      </tr>
      <tr>
         <td class="table_info_title">Last name:</td>
         <td class="table_info_ans student_eng_lastname" name="lastName">Girl</td>
      </tr>
      <tr>
         <td class="table_info_title">Birthday:</td>
         <td class="table_info_ans student_birthday" name="birthday">1992/10/28</td>
      </tr>
  </tbody>
</table>
<table class="info_table" id="interests" data-id="interests">
   <tbody>
      <tr>
        <td class="table_info_title">Destination:</td>
          <td class="table_info_ans student_gender" name="Destination" data-multi="true">US<br/>UK<br/>Canada</td>
      </tr>
      <tr>
        <td class="table_info_title">Year:</td>
        <td class="table_info_ans student_local_name" name="Year">2020</td>
      </tr>
      <tr>
        <td class="table_info_title">Month:</td>
        <td class="table_info_ans student_eng_firstname" name="Month">AUgust</td>
      </tr>
      <tr>
         <td class="table_info_title">Level of educaiton    :</td>
         <td class="table_info_ans student_eng_lastname" name="Level of educaiton" data-multi="true">Certificate<br/>Diploma<br/>masters</td>
      </tr>

  </tbody>
</table>

Then use,

<script>
var tables = $(".info_table");
    var finalObj = {};
    for(var i=0;i<tables.length;i++){
        var tempObj = {};
        $(tables[i]).find("tr").each(function(){
           var key = $(this).find(".table_info_ans").attr("name");
            if($(this).find(".table_info_ans").attr("data-multi")=="true"){
                tempObj[key] = $(this).find(".table_info_ans").html().split("<br>");
            }else{
                 tempObj[key] = $(this).find(".table_info_ans").html();
            }

        });
        var objId = $(tables[i]).attr("data-id");
        finalObj[objId] = tempObj;
    }
</script>

the variable finalObj will have the data in the format you wanted.

我可以将这些数据转换为json并使用表单POST而不是ajax发送它

1 个答案: