0

繰り返しますが、私は本当にphpに取り掛かっています。最初にいくつかのことを知る必要があります。まず、クライアント ページをリロードせずにサーバーにポストバックしようとしています。ここで私がやりたいことの例を示します: ユーザーが両方のテキスト ボックスに数値を入力して追加ボタンをクリックすると、合計値が計算され、ページをリロードせずに 3 番目のテキスト ボックスに表示されます。 ajaxについて少し読んだことがありますが、実装に問題があります。

<?php
    if (isset($_POST["add"]))
    {
        $val1 = $_POST["val1"];
        $val2 = $_POST["val2"];

        $result = $val1 + $val2;
    }
?>

<html>
    <head>
        <title></title>
        <script src="jquery-1.9.1.min.js" ></script>
        <script type="text/javascript">
        $(document).ready(function() {
            if ($("#btn").click)
            {
                var request = $.ajax({
                url: "postback.php",
                type: "POST",
                data: {
                    val1 : "what goes here?",
                    val2 : "what goes here?"

                }

                });
                request.done(function(msg) {
                    $("#log").html( msg );
                });
                request.fail(function(jqXHR, textStatus) {
                alert( "Request failed: " + textStatus );
                });
            }
        });
        </script>
    </head>

    <body>
        <input type="input" name="val1">
        <input type="input" name="val2">
        <input type="input" name="result" value="<?php echo $result ?>">
        <input type="submit" id="btn" name="add">
    </body>
</html>
4

3 に答える 3

2

JavaScript と PHP ロジックを混在させないでください。それらを分離します。

jQuery POST を別のファイルに送信する必要があり、このファイルで PHP の結果をエコーアウトします。

この結果は.done()メソッドに配置されます (私は を使用.success()しますが、jQuery / JavaScript を使用して HTML のコンテンツを更新します)。

これが終わる頃には、HTML / JS ファイルにPHP がまったく含まれていないはずです。

test.php の PHP コード

このことから、val1 と val2 を介して投稿する必要があることがわかります。したがって、これは非常に基本的なスクリプトです。

if (isset($_POST))
{
    $val1 = isset($_POST["val1"]) ? $_POST["val1"] : 'No value 1 passed through';
    $val2 = isset($_POST["val2"]) ? $_POST["val2"] : 'No value 2 passed through';

    if (is_int($val1) && is_int($val2))
    {
        // They're integers, add them
        $result = $val1 + $val2;
    }
    else
    {   
        // They're strings, append them
        $result = $val1 . $val2;
    }

    echo $result;
}

PHP で必要なのはこれだけです。

あなたの HTML / JS

$(document.ready(function() {
    $("#add").click(function(e) {
        e.preventDefault();

        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: {
                'val1' : $("#val1").val(),
                'val2' : $("#val2").val()
            },
            success: function(data, status) {
                $("#result").html(data)
            }
        });
    });
});

<div id="result">Result should appear here</div>
<form>
    <input type="text" id="val1" name="val2" />
    <input type="text" id="val2" name="val2" />
    <input type="submit" id="add" name="add" />
</form>

以上です。ものすごく単純。未検証ですので、ぜひお試しください。

于 2013-05-16T10:24:27.887 に答える
1

JS と PHP を分離したくない場合は、次のようにします

。 1. 入力タイプをボタンとして設定する必要があります。 2. ajax 呼び出しに<input type="button" id="btn" name="add">
も投稿する必要があり ます。 3. テキストボックスから値を取得する必要があります 。エコーしない場合、ajax は残りの html コードとページ コンテンツを返すため、2 つの値をエコーし​​た後のコードです。 5. 最後に、新しい値をphp ではなくJavaScriptで 3 番目の入力に追加する必要があります。これは ajax であり、ページがリロードされないためです。add
$('#val1').val()


これを試して：

<?php
if(isset($_POST["add"])){
    $val1 = $_POST["val1"];
    $val2 = $_POST["val2"];
    $result = $val1+$val2;
    echo $result;
    die();
}
?>

<html>
<head>
    <title></title>
    <script src="jquery-1.9.1.min.js" ></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#btn").click(function(){
            var request = $.ajax({
            url: "postback.php",
            type: "POST",
            data: {
                val1 : $('#val1').val(),
                val2 : $('#val2').val(),
                add : "ok"
            }

            });
            request.done(function(msg) {
                console.log(msg);
                $("#result").val( msg );
            });
            request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
            });
        });
    });
    </script>
</head>
<body>
    <input type="input" id="val1">
    <input type="input" id="val2">
    <input type="input" id="result" value="">
    <input type="button" id="btn" name="add">
</body>
</html>
于 2013-05-16T10:26:09.217 に答える