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

Question

这个问题已经有答案了:

Convert form data to JavaScript object with jQuery (58 个回答)

已关闭 5 年前。

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

我需要将这些数据包装成如下所示的 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

以下内容适用于 JavaScript。试试这个:

将表更改为:

<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>

然后使用，

<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>

变量finalObj将具有您想要的格式的数据。