Как передать динамические данные из HTML-атрибута данных в запрос, используя JavaScript?

Question

У меня есть эта кнопка, которая содержит данные из базы данных

     <button title="View Conversation" type='button' class='btn btn-default btn-sm' data-toggle='modal' data-target='#viewConversationModal'
             data-empproj_id="<?=$employeeproject['emproj_id'];?>"
             data-empprojconvoid="<?=$employeeproject['convofeed_id'];?>"
             **data-empprojconvotoempid**="<?=$employeeproject['toemployee_id'];?>"
             **data-empprojconvofromemip**="<?=$employeeproject['fromemployee_id'];?>"
             data-empprojconvoconversation='"<?=$employeeproject['conversation'];?>"' >     
     </button>  

Мне нужно использовать данные внутри запроса

    <?php
     $toemployee =  data-empprojconvotoempid
     $fromemployee = data-empprojconvofromemip

    $convoQ = "SELECT * FROM projects as p 
    JOIN employeeprojects AS ep ON p.project_id = ep.project_id 
    JOIN employees AS e ON ep.employee_id = e.employee_id 
    JOIN clients AS c ON p.client_id = c.id 
    JOIN employeeprojects_conversation AS epc ON ep.employee_id = epc.toemployee_id
    WHERE epc.toemployee_id=**$toemployee** AND epc.fromemployee_id=**$fromemployee**"; 
   $displayConvoResult=mysqli_query($db, $convoQ);

;?>

затем сделайте заявление, чтобы отобразить разговор в модальном

<?php while($conversation=mysqli_fetch_array($displayConvoResult)){ ?>
<div class='row convorow'>
<div class='col-md-6 pull-left'>
<p style="font-size: smaller;">Messenger A :</p>
<textarea readonlyrows="4" cols="50"></textarea>
</div>
<div class='col-md-6 pull-right'>
<p style="font-size: smaller;">Messenger B :</p>
<textarea readonlyrows="4" cols="50"></textarea>
</div>
</div>
<?php } ;?>

сценарий до сих пор

$('#viewConversationModal').on('show.bs.modal', function(con){
var button = $(con.relatedTarget);
//get data
var empprojconvotoempid = button.data('empprojconvotoempid');
var empprojconvofromemip = button.data('empprojconvofromemip');
});

Answer 1

Просто для наглядности:

• PHP работает в Back-end
• JavaScript, HTML запускаются в интерфейсе (браузер)

Теперь, чтобы отправить данные на сервер из Front-End, вы можете сделать что-то вроде:

$("button").click(_ => {
    const me = $(this)
    $.ajax({
        url: window.location,
        method: "post",
        contentType: "application/json",
        data: {
            empprojToId: me.attr("data-empprojconvotoempid"),
            empfromEmIp: me.attr("data-empprojconvofromemip"),
        },
    })
})

Редактировать:

В вашем случае кажется, что вы бы предпочли, чтобы кнопка выполняла обычное сообщение и снова отображала всю страницу с модальными и новыми разговорами?

Если это так, то вы можете поместить все свои данные в виде HTML:

<form method="post">
    <input name="empproj_id" value="<?=$employeeproject['emproj_id'];?>">
    ...
    <button type="submit">
</form>
<!--Insert Modal Code here-->

Answer 2

Используйте селекторы jquery, чтобы получить данные из атрибутов и затем отправить их через ajax.var dataarray += $("button").attr ("data-...") получить все данные в массиве или переменных, а затем $.ajax ({ data: {"attrdata" : dataarray} , type: "POST",target="callback.php", sucess: function (data){ $("#modal").html(data);} });

Answer 3

Вы должны отправить данные из HTML в php. Поскольку html работает на стороне клиента (в браузере), а php файл выполняется на стороне сервера.

Руководство по PHP: http://php.net/manual/en/reserved.variables.get.php http://php.net/manual/en/reserved.variables.post.php

Самый простой способ, используя jQuery:

<button id='buttonWithData' {data-attributes}></button>
<script type='text/javascript'>
    var data = $('#buttonWithData').data();
    $.ajax('urlOfYoursPhpFile', {
      async: false,
      data: data
    });
</script>

Затем вы можете поймать данные в вашем PHP-файле с помощью GET массив.

Остерегайтесь SqlInjection, работающего с массивами GET и POST.