如何使用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);} });