如何从HTML按钮单击调用PHP函数?

时间:2014-02-21 00:10:36

标签: javascript php jquery html mysql

有人可以通过一些javascript来帮助我,当我点击一个按钮时,我会调用一个函数吗?

我知道之前已经发布过,但我看到的每个答案都过于模糊,我现在已经在这里待了8个小时:(

请记住我是初学者。

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <?php include 'connect.php'; ?>
    <table border cellpadding=5>
        <div>
            <tr>
                <th>Report</th>
                <th></th>
            </tr>
            <tr>
                <td>Students with highest scores</td>
                <td>
                    <button type= button>Generate report</button>
                </td>

        </div>
    </table>
    <?php   

        function highestScore()
        {
            $data = mysql_query("SELECT t.Test_name, s.Student_firstname, s.Student_surname, sc.Result
                                 FROM Tests t 
                                 JOIN Scores sc ON t.id_Tests = sc.Tests_id_Tests
                                 JOIN Students s ON sc.Students_id_Students = s.id_Students
                                 WHERE t.id_Tests = 1
                                 ORDER BY sc.Result DESC");
                    if(!$data)
                    {
                        die("Invalid Query: " . mysql_error());
                    }
            Print"<table border cellpadding=5>";
            while($info = mysql_fetch_array($data))
            {
            Print"<tr>";
            Print "<th>Test:</th> <td>" . $info['Test_name'] . "</td> ";
            Print "<th>First Name:</th> <td>" . $info['Student_firstname'] . "</td> ";
            Print "<th>Surname:</th> <td>" . $info['Student_surname'] . "</td> ";
            Print "<th>Result:</th> <td>" . $info['Result'] . "</td> ";
            }
            Print "</table>";
        }

    ?>
</body>

我想使用我创建的“生成报告”按钮来执行“highestScore”功能。

该函数从mySQL数据库创建一个值表。

最终会有更多按钮显示不同的表格。

感谢任何帮助。

5 个答案:

答案 0 :(得分:2)

在服务器上运行HTML时,

JavascriptPHP在浏览器上运行。您必须使用AJAX或刷新页面进行另一次服务器调用。以下是如何在不刷新页面的情况下使用AJAX执行此操作。 ($.ajax docs

  1. 使用以下代码创建新的PHP页面:query.php

    <?php   
    
            $data = mysql_query("SELECT t.Test_name, s.Student_firstname, s.Student_surname, sc.Result
                                 FROM Tests t 
                                 JOIN Scores sc ON t.id_Tests = sc.Tests_id_Tests
                                 JOIN Students s ON sc.Students_id_Students = s.id_Students
                                 WHERE t.id_Tests = 1
                                 ORDER BY sc.Result DESC");
                    if(!$data)
                    {
                        die("Invalid Query: " . mysql_error());
                    }
            Print"<table border cellpadding=5>";
            while($info = mysql_fetch_array($data))
            {
            Print"<tr>";
            Print "<th>Test:</th> <td>" . $info['Test_name'] . "</td> ";
            Print "<th>First Name:</th> <td>" . $info['Student_firstname'] . "</td> ";
            Print "<th>Surname:</th> <td>" . $info['Student_surname'] . "</td> ";
            Print "<th>Result:</th> <td>" . $info['Result'] . "</td> ";
            }
            Print "</table>";
    
    ?>
    
  2. 使用按钮的点击事件来运行ajax请求:(将以下脚本添加到HTML页面)

    $(function(){
        $('button').click(function(){
            $.ajax({
                url:'query.php',
                success:function(response){ alert(response); }
            }); // this will alert the code generated in example.php
        });
    });
    

答案 1 :(得分:1)

使用带有提交按钮的表单,而不是使用按钮。通过POST发送请求,并使用isset($ _ POST ['report'])在PHP中检测到该请求,然后显示您的报告。

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <?php include 'connect.php'; ?>
    <table border cellpadding=5>
        <div>
            <tr>
                <th>Report</th>
                <th></th>
            </tr>
            <tr>
                <td>Students with highest scores</td>
                <td>
            <form method="POST">
                            <input type="submit" name="report">Generate report</button>
            </form>
                </td>

        </div>
    </table>
    <?php   

        function highestScore()
        {
            $data = mysql_query("SELECT t.Test_name, s.Student_firstname, s.Student_surname, sc.Result
                                 FROM Tests t 
                                 JOIN Scores sc ON t.id_Tests = sc.Tests_id_Tests
                                 JOIN Students s ON sc.Students_id_Students = s.id_Students
                                 WHERE t.id_Tests = 1
                                 ORDER BY sc.Result DESC");
                    if(!$data)
                    {
                        die("Invalid Query: " . mysql_error());
                    }
            Print"<table border cellpadding=5>";
            while($info = mysql_fetch_array($data))
            {
            Print"<tr>";
            Print "<th>Test:</th> <td>" . $info['Test_name'] . "</td> ";
            Print "<th>First Name:</th> <td>" . $info['Student_firstname'] . "</td> ";
            Print "<th>Surname:</th> <td>" . $info['Student_surname'] . "</td> ";
            Print "<th>Result:</th> <td>" . $info['Result'] . "</td> ";
            }
            Print "</table>";
        }

    if (isset($_POST['report'])) {
        highestScore();
    }

    ?>
</body>

答案 2 :(得分:1)

原始按钮在纯HTML中没有意义。 什么都不做 - 除了看起来像一个按钮。

您可以将与JavaScript结合使用

<form action="input_button.htm">

    <textarea cols="20" rows="4" name="field1"></textarea>

    <input type="button" name="Text 1" value="Add some new Text"
      onclick="this.form. field1.value='Some new Text'">

</form>

此按钮通过点击它来执行JavaScript - 并替换名为textarea的{​​{1}}。

答案 3 :(得分:0)

所以你想要这一切都在一个页面上,所以你需要的第一件事是form html标签包裹在按钮周围,我已经命名为'submit'并将动作设置为页面本身<?php echo $_SERVER['PHP_SELF']; ?> 。单击该按钮时,它将执行您的PHP代码

脚本

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<?php include 'connect.php'; ?>
<table border cellpadding=5>
    <div>
        <tr>
            <th>Report</th>
            <th></th>
        </tr>
        <tr>
            <td>Students with highest scores</td>
            <td>
            <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <!-- Calls for the PHP script on the page-->
                <button type= button>Generate report</button>
                </form>
            </td>

    </div>
</table>
<?php  
    //Script that is called

    if(isset($_POST['submit'])){ //The ID of the form we used is 'submit' so when that is clicked it will execute this
    function highestScore()
    {
        $data = mysql_query("SELECT t.Test_name, s.Student_firstname, s.Student_surname, sc.Result
                             FROM Tests t 
                             JOIN Scores sc ON t.id_Tests = sc.Tests_id_Tests
                             JOIN Students s ON sc.Students_id_Students = s.id_Students
                             WHERE t.id_Tests = 1
                             ORDER BY sc.Result DESC");
                if(!$data)
                {
                    die("Invalid Query: " . mysql_error());
                }
        Print"<table border cellpadding=5>";
        while($info = mysql_fetch_array($data))
        {
        Print"<tr>";
        Print "<th>Test:</th> <td>" . $info['Test_name'] . "</td> ";
        Print "<th>First Name:</th> <td>" . $info['Student_firstname'] . "</td> ";
        Print "<th>Surname:</th> <td>" . $info['Student_surname'] . "</td> ";
        Print "<th>Result:</th> <td>" . $info['Result'] . "</td> ";
        }
        Print "</table>";
    }


    highestScore(); //executes your function you created
    }

?>
</body>

答案 4 :(得分:0)

当PHP在服务器上运行时,HTML和JavaScript在浏览器上运行。你必须编写Ajax或java-script.In java脚本你可以调用php页面并在那个页面中做你的东西。这将是更好的方法。你也可以传递变量。我在这里发布一个例子。 / p>

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function removeItem(oButton) 
{
var hello = "hello";
var world = "world";
window.location.href = "trytest.php?w1=" + hello + "&w2=" + world;//Your page location
}       
</script>
</head>
<body>
<form>
<h2>This is the test </h2>
<button type="show" onclick="removeItem(this); return false;">Test</button>
</body>
</html>