Javascript 在模式弹出窗口上运行MYSQL查询_Javascript_Php_Mysql_Modal Dialog

Javascript 在模式弹出窗口上运行MYSQL查询

javascript php mysql

Javascript 在模式弹出窗口上运行MYSQL查询,javascript,php,mysql,modal-dialog,Javascript,Php,Mysql,Modal Dialog,我的代码中有一个按钮，onclick运行一个javascript&弹出一个模式。我一直在尝试在每次模式弹出时执行mysql查询有什么办法可以做到这一点吗下面是更多帮助的代码 <button class="art-button" id='.$id.'>Generate Reciept</button> <div id="myModal" class="modal"> <div class="modal-content"> &l

我的代码中有一个按钮，onclick运行一个javascript&弹出一个模式。我一直在尝试在每次模式弹出时执行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>

生成接收

打印
var btn=document.getElementById（）；
var modal=document.getElementById（“myModal”）；
var span=document.getElementsByClassName（“关闭”）[0]；
btn.onclick=函数（）{
确认（“从何处收取卢比”）；
警报（“从中成功收集的RS罚款”）；
modal.style.display=“块”；
}
span.onclick=函数（）{
modal.style.display=“无”；
}
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
函数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'）；
$（“#打印”）.remove（）；
WindowObject.document.writeln（DocumentContainer.innerHTML）；
WindowObject.document.close（）；
WindowObject.focus（）；
WindowObject.print（）；
WindowObject.close（）；
}

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

您需要从网站获取数据，捕获数据后，按如下方式打开模式：

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

您需要从网站获取数据，捕获数据后，按如下方式打开您的模式：

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

@帕维兹·汗，这里有一个类似的例子。当用户点击按钮打开一个模型时，请求通过

AJAX

发送，

PHP

文件运行

SQL查询

，结果将被发回并显示在带有jquery的模型中

这是带有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>


范例
开放模态
&时代；
模态头
接近
//朱利文
$（文档）.ready（函数（）{
$（“#myBtn”）。单击（函数（）{
$（“#myModal”）.modal（）；
//这是jqueryajax方法
$.ajax({
类型：'POST'，
url:'get_details.php'，
数据：{获取详细信息：1}，
成功：功能（数据）{
$（“#显示_详细信息”）.html（数据）；//数据以id=display_详细信息的形式显示
}
}); 
});
});

这是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接收数据的输出图像

学习jqueryajax的网站

如果您喜欢我的Answer，请打勾并单击顶部箭头@Parvez Khan，下面是一个类似的示例。当用户点击按钮打开一个模型时，请求通过

AJAX

发送，

PHP

文件运行

SQL查询

，结果将被发回并显示在带有jquery的模型中

这是带有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>


范例
开放模态
&时代；
模态头
接近
//朱利文
$（文档）.ready（函数（）{
$（“#myBtn”）。单击（函数（）{
$（“#myModal”）.modal（）；
//这是jqueryajax方法
$.ajax({
类型：'POST'，
url:'get_details.php'，
数据：{获取详细信息：1}，
成功：功能（数据）{
$（“#显示_详细信息”）.html（数据）；//数据以id=display_详细信息的形式显示
}
}); 
});
});

这是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接收数据的输出图像

学习jqueryajax的网站

如果您喜欢我的Answare，请打勾并单击顶部箭头，您不能从客户端调用php方法。您需要对后端进行一些REST调用，后端将处理MYSQL查询并发回。您不能从客户端调用php方法。您需要对后端进行一些REST调用，后端将处理MYSQL查询并发送回。谢谢，但我对AJAX了解不多，您能告诉我这方面的语法吗？我建议您先学习vanila javascript，然后再开始学习jQuery.：）应该是一个comment@Parvez最好使用

jqueryajax

，因为它非常简单，编码更少。如果您愿意，我可以在这里添加类似的示例。我坚持，Plz:）好的，谢谢，但我对AJAX不太了解，您能给我演示一下它的语法吗？我建议您先学习vanila javascript，然后再开始学习jQuery。：）应该是一个comment@Parvez最好使用

jqueryajax

，因为它非常简单，编码更少。如果你愿意，我可以在这里加上你类似的例子。我坚持，请：）