Question

首先我要说的是，我刚刚开始使用AJAX，它刚刚开始。

这是我的代码：

<?php

    if (isset($_POST['number1'],$_POST['operation'],$_POST['number2'])) {
        $number1    = trim(strip_tags($_POST['number1'])); 
        $number2    = trim(strip_tags($_POST['number2'])); 
        $operation  = $_POST['operation']; 

        if ($operation == "plus") {
            $answer = $number1 + $number2;
            $operation = "+";
        } 

        if ($operation == "minus") {
            $answer = $number1 - $number2;
            $operation = "&#8211;";
        } 

        if ($operation == "multiply") { 
            $answer = $number1 * $number2;
            $operation = "&#215;";
        } 

        if ($operation == "divide") { 
            $answer = $number1 / $number2;
            $operation = "&#247;";

        }

        $output = '<br /><center><div id="success"><span style="color: orange; font-size:   20px;">'.number_format($number1).'</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue; font-size: 24px; font-weight:bold;">'.$operation.'</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: orange; font-size: 20px;">'.number_format($number2).'</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: blue; font-size: 24px; font-weight:bold;">=</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: purple; font-size: 20px;">'.number_format($answer).'</span></div>
        ';

        echo $output;

        die();
    }

?>


    <form method="POST" id='calculatorForm'>
        <input type="number" name="number1" id="url" placeholder="Enter your first number" autofocus required />

        <br />

        <select name="operation" id="url" style="width:100%;">
            <option value="operation">Select A Operation:</option>
            <option value="plus">Plus</option> 
            <option value="minus">Minus</option> 
            <option value="multiply">Multiply</option> 
            <option value="divide">Divide</option> 
        </select>

        <br />

        <input type="number" name="number2" id="url" placeholder="Enter your second number" required />

        <input type="submit" class="enter" id="submit" name="submit" value="Calculate!">

        <br />

        <span style="font-size:40px;color: purple;font-wight: bold;">Result: <span id='result'>0</span></span>
    </form>

    <script>
        $('#calculatorForm').submit(function(){
            var num1 = $('input[name="number1"]').val();
            var oper = $('select[name="operation"]').val();
            var num2 = $('input[name="number2"]').val();
            $.ajax({
                type: "post",
                data: {number1: num1, operation: oper, number2: num2},
                success: function(data){
                    $('#result').html(data);
                }
            });
            return false;
        });
    </script>

当我尝试使用表单提交在我的页面上运行此代码时，它会在我的表单下再次提供整个页面，并且不会计算我输入的内容。

Answer 1

这种情况正在发生，因为您正在使用AJAX再次抓取整个页面（在ajax请求中没有提供URL）。

一种解决方案可能是将PHP分成单独的文件。然后使用ajax请求获取...

JavaScript的：

$.ajax({
    url: 'calc.php',
    type: 'post',
    data: {number1: num1, operation oper, number2: num2},
    success: function(data) {
        $('#result').html(data);
    }
});

只在表格上留下表格。

使用PHP代码创建一个名为calc.php（或其他）的单独PHP页面

Answer 2

Ajax函数应该是

   var data= $('#calculatorForm').serialize();    
   $.ajax({
        url:"Page.php",
        type: "post",
        data: data,
        success: function(data){
            $('#result').html(data);
        }
    });`

你错过了网址

AJAX重新提交没有结果的整个页面

2 个答案: