Question

我的代码中有一个按钮，onclick运行javascript＆amp;弹出一个模态。我每次弹出模态时都试图执行一个mysql查询。

有没有办法实现这个目标？

这里有更多帮助的代码

<button class="art-button" id='.$id.'>Generate Reciept</button>
   <div id="myModal" class="modal">
  <div class="modal-content">
    </br><button id="print" class="art-button" onClick="PrintContent('myModal');collect();">Print</button>
  </div>
</div>

<script>
var btn = document.getElementById(<?php echo $id?>);
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
    confirm('Collect RS <?php echo $total?> From <?php echo $mem_nm?>?');
    alert("Fine of RS <?php echo $total ?>Collected Successfully From <?php echo $mem_nm?>");
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

function PrintContent(myModal) {
    var DocumentContainer = document.getElementById(myModal);
    var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');

    $('#print').remove();
    WindowObject.document.writeln(DocumentContainer.innerHTML);
    WindowObject.document.close();
    WindowObject.focus();
    WindowObject.print();
    WindowObject.close();
}
</script>

Answer 1

当您点击打开模态窗口的按钮时，发出AJAX请求以从数据库中获取数据。

Answer 2

您需要来自您网站的$.get数据，并在捕获数据后，打开您的模式，如下所示：

$.get( "[your page address]", function( data ) {
  //Open your desired window here
  //or even make decision based on data
});

Answer 3

@Parvez Khan所以这里是一个类似的例子。当用户单击按钮打开模型时，请求将通过AJAX发送，PHP文件将运行SQL query，结果将被发送回并显示在带有jquery的模型中。< / p>

这些是带有jquery脚本的HTML代码

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Model Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body" id="display_details">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

<script>

//JUERY SCRIPT
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal();

        //THIS IS JQUERY AJAX METHOD
        $.ajax({
            type:'POST',
            url:'get_details.php',
            data:{get_details:1},
            success:function(data){
                $("#display_details").html(data); //the data is displayed in id=display_details
            }
        }); 
    });
});
</script>

</body>
</html>

这是PHP文件代码：

 <?php
    $link = new mysqli('localhost','root','','demo');

    if($link->connect_error){
        die ("Connection failed".$link->connect_error);
    }

    if(isset($_POST['get_details']) && isset($_POST['get_details'])==1){
        $sql = "SELECT * FROM employee";

        if($res = $link->query($sql)){
            while($row = $res->fetch_assoc()){
        ?>
                <p>employee Name : <?php echo $row['employee_name'];?></p>
                <p>Employee Salary : <?php echo $row['employee_salary'];?></p>
                <p>Employee age : <?php echo $row['employee_age'];?></p>
        <?php
            }
        }
        else
        {
            echo "Error".$link->error;
        }
    }
?>

这是通过AJAX接收数据的输出图像

网站学习jquery ajax

w3schools

tutorails point

javatutorial point

在模态弹出窗口中运行MYSQL查询

3 个答案:

如果您喜欢我的回答，请勾选并点击顶部箭头