使用PHP在同一頁面中顯示結果

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出現在同一頁面上。

我嘗試使用Header（“ Location：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>

並包括要在同一頁面上應用的所有計算，為避免錯誤，請對所有$ post索引使用函數isset（$ _ POST ['num1']）。

Answer 2

對於該項目來說可能有些過頭，但將來會在諸如此類的事情上對您有很大幫助： Ajax ：異步JavaScript和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選擇它。 確保從<form>刪除action="calc.php" ，以防止其提交傳統方式。

在頁面的某處添加它。 它可以在<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 個解決方案

解決方案1
0 2017-12-13 00:26:07

解決方案2
0 已采納 2017-12-13 00:41:12

使用PHP在同一頁面中顯示結果

問題描述

2 個解決方案

解決方案1 0 2017-12-13 00:26:07

解決方案2 0 已采納 2017-12-13 00:41:12

解決方案1
0 2017-12-13 00:26:07

解決方案2
0 已采納 2017-12-13 00:41:12