JQuery - 編輯表，通過序列化獲取數據呢？

Question

這是我的java代碼。我想找一個更乾淨的方式來做到這一點。我如何通過序列化訪問相同的數據？我計劃在單個頁面上需要處理多個表單。我正在尋找DRY代碼，而不必專門命名每個字段。

謝謝！

HTML： ItemAmountDescription

      <tr class="edit_tr" id="3"> 
       <td class="edit_td"> 
        <span class="text" id="name_3">Salary</span> 
        <input type="text" value="Salary" class="editbox" id="name_input_3"/> 
</td>     <td class="edit_td"> 
        <span class="text" id="amount_3">100.00</span> 
        <input type="text" value="100.00" class="editbox" id="amount_input_3"/> 
</td>     <td class="edit_td"> 
        <span class="text" id="description_3">Salary</span> 
        <input type="text" value="Salary" class="editbox" id="description_input_3"/> 
</td>    </tr> 

      </tbody> 
     </table> 

Java代碼：

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $(".edit_tr").click(function() 
     { 
      var ID=$(this).attr('id'); 
      $("#name_"+ID).hide(); 
      $("#amount_"+ID).hide(); 
      $("#description_"+ID).hide(); 
      $("#description_input_"+ID).show(); 
      $("#name_input_"+ID).show(); 
      $("#amount_input_"+ID).show(); 

     }).change(function() 
     { 
      var ID=$(this).attr('id'); 
      var name=$("#name_input_"+ID).val(); 
      var amount=$("#amount_input_"+ID).val(); 
      var description=$("#description_input_"+ID).val(); 
      var dataString = 'id='+ ID +'&name='+name+'&amount='+amount+'&description='+description; 
      $("#name_"+ID).html('<img src="load.gif" />'); // Loading image 

      if(name.length>0 && amount.length>0) 
      { 


       $.ajax({ 
        type: "POST", 
        url: "{{url('budget/edit-income')}}", 
        data: dataString, 
        cache: false, 
        success: function(html) 
        { 
         $("#name_"+ID).html(name); 
         $("#amount_"+ID).html(amount); 
         $("#description_"+ID).html(description); 
        } 
       }); 
      } 
      else 
      { 
       alert('Enter something.'); 
      } 

     }); 

// Edit input box click action 
     $(".editbox").mouseup(function() 
     { 
      return false 
     }); 

// Outside click action 
     $(document).mouseup(function() 
     { 
      $(".editbox").hide(); 
      $(".text").show(); 
     }); 

    }); 
</script> 

Answer 1

你提到連載...使用$('form').serialize();創建準備好了AJAX data

字符串