Как создать кнопку публикации AJAX для нескольких данных в таблице?

#javascript #jquery #ajax

#javascript #jquery #ajax

Вопрос:

У меня есть такая таблица

 <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>
 

Как реализовать отправку IP-адреса POST-данных с помощью AJAX?
Я пробовал с этим кодом, но не работает..

 <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 send_data.php , а затем, в случае успеха, открыть новую вкладку http://whatismyipaddress.com/ip/' dataIP , но не работает с этим кодом,

Я надеюсь, что кто-нибудь поможет мне решить эту проблему, спасибо

Ответ №1:

Вы не можете повторять идентификаторы на странице, они уникальны по определению, поэтому их нужно будет изменить на класс

Внутри обработчика событий 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");
            }
        });  

});
 

Комментарии:

1. Не работает, кстати, я использую серверную часть с данными. Я обновил полный код в своем сообщении, пожалуйста, смотрите

2. Вероятно, вам потребуется использовать делегирование событий. Попробуйте $(document).on('click', '.check',function() { ...

3. событие обязательно должно сработать .. у вас могут возникнуть проблемы с вашим ajax