如何使用javascript將動態數據從html數據屬性傳遞到查詢？

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在后端運行
• JavaScript，HTML在前端 （瀏覽器）中運行

現在，要將數據從前端發送到服務器，您可以執行以下操作：

$("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

您應該將數據從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>

然后，您可以使用GET數組在php文件中捕獲數據。

注意使用GET和POST數組的SqlInjection。

Answer 3

使用jquery選擇器從屬性獲取數據，然后通過ajax發送數據。 var dataarray += $("button").attr ("data-...")獲取數組或變量中的所有數據，然后獲取$.ajax ({ data: {"attrdata" : dataarray} , type: "POST",target="callback.php", sucess: function (data){ $("#modal").html(data);} });