php - Ajax 使用 POST 方法发送表格行

Question

我有一个表格，在这个表格中我有一张 table 。现在我有 Ajax 可以使用 POST 方法发送更改时的值。

但有时我的表中有 50 个结果，所以每次我更改输入字段时它都会发送大量数据。

是否可以只发送我正在更改的行中的值而不是发送表的所有数据？

Ajax :

    (function($){
        function urenForm( e ){
            $.ajax({
                url: 'blank.php',
                dataType: 'json',
                type: 'post',
                data: $(this).serialize(),
                success: function( data, textStatus ){

                }
            });
            e.preventDefault();
        }
        $('#urenForm').change( urenForm );
    })(jQuery);

HTML:

这是 1 行。

 <tr>
      <td><input type='number' id='resourceid_<?php echo $trCode; ?>' name='<?php echo $trCode; ?>[resourceid]' class='form-control' value='' readonly></td>     
      <td><input type='number' id='base_<?php echo $trCode; ?>'       name='<?php echo $trCode; ?>[base]'       class='form-control' value=''></td>
      <td><input type='number' id='lot_<?php echo $trCode; ?>'        name='<?php echo $trCode; ?>[lot]'        class='form-control' value=''></td>
      <td><input type='number' id='split_<?php echo $trCode; ?>'      name='<?php echo $trCode; ?>[split]'      class='form-control' value=''></td>
      <td><input type='number' id='sub_<?php echo $trCode; ?>'        name='<?php echo $trCode; ?>[sub]'        class='form-control' value=''></td>
      <td><input type='number' id='seq_<?php echo $trCode; ?>'        name='<?php echo $trCode; ?>[seq]'        class='form-control' value=''></td>    
      <td><input type='number' id='indirect_<?php echo $trCode; ?>'   name='<?php echo $trCode; ?>[indirect]'   class='form-control' value=''></td>
      <td><input type='date'   id='datum_<?php echo $trCode; ?>'      name='<?php echo $trCode; ?>[datum]'      class='form-control' value='' required></td>
      <td><input type='time'   id='clockin_<?php echo $trCode; ?>'    name='<?php echo $trCode; ?>[clockin]'    class='form-control' value='' required></td>
      <td><input type='time'   id='clockout_<?php echo $trCode; ?>'   name='<?php echo $trCode; ?>[clockout]'   class='form-control' value='' required></td>
      <td><input type='number' id='break_<?php echo $trCode; ?>'      name='<?php echo $trCode; ?>[break]'      class='form-control' value='' step=".01" required></td>
      <td><input type='number' id='worked_<?php echo $trCode; ?>'     name='<?php echo $trCode; ?>[worked]'     class='form-control' value='' readonly></td>
      <td><input type='number' id='multiplier_<?php echo $trCode; ?>' name='<?php echo $trCode; ?>[multiplier]' class='form-control' value=''></td>

      <td><button class='btn btn-default' type='submit' name='<?php echo $trCode; ?>[update]'>Update</button></td>
  </tr>

Answer 1

是的，这是可能的。只是不要发送整个表格。发送行的输入元素而不是表单。你有更新按钮，从这个元素你可以遍历 dom 树一个元素节点直到父 tr 元素。从这个你可以找到所有的输入元素。

这只是一个简短的代码片段，可以将您推向正确的方向。

var button = document.querySelector('[id="update-button-<?= $primaryKey ?>"]');

button.addEventListener('click', function(event) {
    event.preventDefault();

    var target = event.target,
        parent = null;

    for ( ; target && target !== document; target = target.parentNode ) {
        if ( target.matches( 'tr' ) ) parent = target;
    }

    var childnodes = parent.querySelectorAll('input'),
        data = new FormData();

    for (var i = 0; i < childnodes.length; i++) {
        var child = childnodes[i];
        data.append(child.name, child.value); 
    }

    // place HTTP XML Request here with data var
    // data now contains all input values from the table row you want to submit
});

data 变量是一个 javascript FormData 实例，它获取表格行的所有输入值。要获取更新数据库中表行的主键，请使用隐藏的输入元素或按钮元素中的数据属性，并将其添加到 FormData 实例。