Question

我基本上是用PHP开始学习，我想做的很简单。我想在同一页面显示计算结果。

代码！

的index.php：

<?php include "header.php"; ?>

<?php include "footer.php"; ?>

的header.php：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<form action="calc.php" method="POST">
    <input type="text" name="num1">
    <input type="text" name="num2">
    <select name="cal" id="">
        <option value="add">Add</option>
        <option value="sub">Subtract</option>
        <option value="mul">Multiply</option>
    </select>
    <button type="submit">Calculate</button>
</form>

calc.php：

<?php

include 'includes/calc.inc.php';

$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
$cal = $_POST['cal'];

$calculator = new Calc($num1, $num2, $cal);
echo $calculator->setCalc(); //gostaria de mostrar na mesma página

calc.inc.php：

<?php

class Calc{
    public $num1;
    public $num2;
    public $cal;

    public function __construct($num1, $num2, $cal){
        $this->num1 = $num1;
        $this->num2 = $num2;
        $this->cal = $cal;
    }

    public function setCalc(){
        switch($this->cal){
            case 'add':
                $result = $this->num1 + $this->num2;
                break;
            case 'sub':
                $result = $this->num1 - $this->num2;
                break;
            case 'mul':
                $result = $this->num1 * $this->num2;
                break;
            default:
                $result = "Error";
                break;
        }
        return $result;
    }
}

我使用文件 calc.php获取 index.php 页面中的值。文件 calc.php 我通过了 calc.inc.php 的值，然后进行计算并将最终值返回给 calc.php。麻烦的是方法。它被重定向到 calc.php 页面，结果显示在该页面中，我希望它与index.php显示在同一页面上。

我用标题（“位置：index.php”）尝试了一些东西，但这会刷新页面，所以对我不起作用。这可能是我想要的吗？我接受不同的解决方案

Answer 1

保持表单操作为空

<form action="" method="POST">
    <input type="text" name="num1">
    <input type="text" name="num2">
    <select name="cal" id="">
        <option value="add">Add</option>
        <option value="sub">Subtract</option>
        <option value="mul">Multiply</option>
    </select>
    <button type="submit">Calculate</button>
</form>

并包含您要在同一页面上应用的所有计算，并避免错误使用函数isset（$ _ POST [＆＃39; num1＆＃39;]）为所有$ post索引。

Answer 2

对于这个项目来说可能有些过分，但将来会对你有很多帮助：Ajax: Asynchronous JavaScript and XML。 Ajax允许您提交表单，处理表单和检索结果，而无需刷新或重新加载您所在的页面。使用Ajax的最简单方法是使用JavaScript框架jQuery。您需要在<head>。

中加入此行

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

这一行加载了jQuery框架，因此您可以使用这种快速，高效，可靠的标记语言来动态修改页面，而不是以难以编写的方式编写传统的JavaScript。将您的<button type="submit">Calculate</button>更改为 <button class="mybutton">Calculate</button> ，以便我们可以使用jQuery选择它。请务必从action="calc.php"中删除<form>，以防止其以传统方式提交。

在页面的某个位置添加此项。它可以在<form>内或在它之外。

<div class="myresult"></div>

这是calc.php的输出出现的地方。现在，在<head>中添加此内容，请确保在包含jQuery框架的<script>之后添加它。

<script type="text/javascript">
$(document).ready(function() {
    $(".mybutton").click(function() {

        $.ajax({
            type: "post",
            url: "calc.php",
            data: $("form").serialize(),
            success: function(result) {
                $(".myresult").html(result);
            }
        });

    });
});
</script>

上面的代码会在后台将您的表单提交到 calc.php 。它会提交所有选中的内容，一切都会像往常一样发送。 calc.php将处理此 $ _ POST 数据，并按照您的预期回显结果。结果将显示在您创建的新div中。我希望这有帮助！

使用PHP在同一页面中显示结果

2 个答案: