Question

我目前正在制作一个可排序的表，并且需要将不仅仅是id传递给序列化数组。

我添加了我的所有代码，删除了post文件，除了var_dumping post之外，dossent还做了其他任何事情。

<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12"><br><br><br><br>
            <table class="display table table-striped table-hover table-bordered dt-responsive responsive nowrap" cellspacing="0" width="100%">
            <thead>
                <th>Navn</th>
                <th>Order</th>
            </thead>
            <tbody id="sortable">
                <tr id="order_1" data-extravalue="45">
                    <td>value</t>
                </tr>
                <tr id="order_2" data-extravalue="56">
                    <td>value</t>
                </tr>
            </tbody>
            </table>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $( document ).ready(function() {

        $('#sortable').sortable({
            update: function( event, ui ) {

                var order = $("#sortable").sortable('serialize');

                $.ajax({
                    data: order,
                    type: 'POST',
                    url: 'post.php'
                });
            }
        });
    });
</script>
</body>
</html>

Answer 1

不确定，但这可能会帮助你。由于您要发布到PHP，因此需要在json_decode()上使用$_POST['json']。

工作示例：https://jsfiddle.net/Twisty/a2e9626L/4/

<强> HTML

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <br>
      <br>
      <br>
      <br>
      <table class="display table table-striped table-hover table-bordered dt-responsive responsive nowrap" cellspacing="0" width="100%">
        <thead>
          <th>Navn</th>
          <th>Order</th>
        </thead>
        <tbody id="sortable">
          <tr id="order_1" data-extravalue="45">
            <td>value</td>
          </tr>
          <tr id="order_2" data-extravalue="56">
            <td>value</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<强>的JavaScript

$(function() {
  $('#sortable').sortable({
    update: function(event, ui) {
      var order = $("#sortable").sortable('serialize');
      var data = [];
      $("#sortable tr").each(function(i, el) {
        data.push({
          order: $(el).attr("id"),
          value: $(el).data("extravalue")
        });
      });
      $.ajax({
        data: {
          json: JSON.stringify(data)
        },
        type: 'POST',
        url: 'post.php'
        success: function(d) {
          console.log(d);
        }
      });
    }
  });
});

Answer 2

如果您不介意公开参数，则可以随时将其附加到请求URL中。

在您的情况下，像这样：

    $('#sortable').sortable({
        update: function( event, ui ) {

            var order = $("#sortable").sortable('serialize');

            $.ajax({
                data: order,
                type: 'POST',
                url: "post.php?extra_param=value,another_extra_param=another_value"
            });
        }
    });

我今天遇到了这个阻止程序，但是在Rails中，这就是我解决的方法。

如何将自定义变量添加到jQuery可排序？

2 个答案: