Как передать динамические данные из HTML-атрибута данных в запрос с использованием JavaScript?
У меня есть эта кнопка, которая содержит данные из базы данных
<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');
});
Решение
Просто для наглядности:
- PHP работает в Back-конец
- 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-->
Другие решения
Вы должны отправить данные из 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.
Используйте селекторы jquery, чтобы получить данные из атрибутов и затем отправить их через ajax.var dataarray += $("button").attr ("data-...") получить все данные в массиве или переменных, а затем $.ajax ({ data: {"attrdata" : dataarray} , type: "POST",target="callback.php", sucess: function (data){ $("#modal").html(data);} });