javascript - 如何为表中的多个数据创建 AJAX POST 按钮？

Question

我有这样的 table

<table>
  <tr>
    <th>User</th>
    <th>IP</th> 
    <th>Action</th>
  </tr>
  <tr>
    <td>Jack</td>
    <td>192.168.0.1</td> 
    <td><button id="check" name="192.168.0.1">Check</button></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>192.168.0.2</td> 
    <td><button id="check" name="192.168.0.2">Check</button></td>
  </tr>
<tr>
    <td>Smith</td>
    <td>192.168.0.3</td> 
    <td><button id="check" name="192.168.0.3">Check</button></td>
  </tr>
</table>

如何实现用AJAX发送POST数据IP？我已尝试使用此代码但不起作用..

<script>
$('#check').click(function() { 

var getIP   = $('#check').name();
var dataIP  = 'sendIP=' + getIP;

        $.ajax({
            url: 'url.php',
            type: 'POST',
            data: dataIP;
            success: function () {
              alert("Success");
            }
        });  

});
</script>

[更新]这是我项目的完整代码。

<script>
$(document).ready(function() {
  $('#reportrange span').on('DOMSubtreeModified', function () {
    var dariRange = $(this).html();
    var SplitRange = dariRange.split("~");

    $('#datatable-keytable').DataTable( {
    "destroy": true,
    "processing": true,
    "keys": true,
    "order": [[ 6, "desc" ]],
    "ajax": {
      url: "view.php",
      type : 'GET',
      data : {
        datedari : SplitRange[0].trim(),
        datesampai : SplitRange[1].trim()
      }
    },
    "columnDefs": [
    { "width": "5%", "targets": 0 },
     ],

    "columns": [
        { "data": "click_username" },
        { "data": "click_cid" },
        { "data": "click_offer" },
        { "data": "click_ip" },
        { "data": "click_isp" },
        { "data": "click_posttime" },
        { "data": "click_ip",
        "render": function (click_ip,data,row) {
                            var clickid = data.click_cid;
                            return ('<center><button class="check" id="'+click_ip+'" name="'+clickid+'">Check</button></center>'); //This for Button check
                        }
        },          
        ],
    } );
} );
} );
</script>
<script type="text/javascript">
$(document).on('click', '.check',function() {  

        var dataID  = 'sendCID=' + this.name;
        var dataIP  = this.id;

        $.ajax({
            url: 'send_data.php',
            type: 'POST',
            data: dataID;
            success: function () {
              window.open('http://whatismyipaddress.com/ip/'+dataIP);
            }
        });  

});
</script>

我想将 var dataID POST 到 send_data.php 然后如果成功打开新标签页到 http://whatismyipaddress.com/ip/'+ dataIP 但不适用于此代码，

希望有人帮我解决这个问题，谢谢

Answer 1

您不能在页面中重复 ID，它们根据定义是唯一的，因此需要更改为类

在事件处理程序中 this 是事件发生的元素，因此在您的情况下 this.name 将是所需的值

// use class selector
$('.check').click(function() {     

        var dataIP  = 'sendIP=' + this.name;

        $.ajax({
            url: 'url.php',
            type: 'POST',
            data: dataIP;
            success: function () {
              alert("Success");
            }
        });  

});