0

まず、昨日始めたばかりの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>

フォーム送信を使用してページでこのコードを実行しようとすると、フォームの下にページ全体が表示され、入力内容は計算されません。

4

2 に答える 2

1

これは、AJAX を使用してページ全体を再度取得しているためです (ajax 要求に URL がない場合)。

解決策の 1 つは、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ページを作成します

于 2013-02-25T17:49:46.630 に答える
0

Ajax関数は次のようになります

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

あなたはURLを見逃しました

于 2013-02-25T17:41:46.403 に答える