文章/答案/技术大牛

发布

社区首页 >问答首页 >Ajax使用POST方法发送表行

问Ajax使用POST方法发送表行
EN

Stack Overflow用户

提问于 2019-08-21 14:54:14

回答 2查看 1.1K关注 0票数 2

我有一个表格，在这个表格里我有一个表格。现在我有了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>

php

jquery

html

ajax

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-08-21 15:10:46

是的，这是可能的。只是不要发送整个表单。发送行的输入元素而不是表单。你有一个更新按钮，从这个元素你可以遍历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
});

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

票数 2

Stack Overflow用户

发布于 2019-08-21 15:01:48

在php代码中，返回最后插入记录而不是返回所有记录

<?php
   select * from ur_table_name where Id= LAST_INSERT_ID();
 ?>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57586006

复制

相似问题

问Ajax使用POST方法发送表行
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ajax使用POST方法发送表行EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Ajax使用POST方法发送表行
EN