javascript - AJAXを介してPHPページにデータを渡し、そのページを別のDIVに表示する方法は?

Question

私が使用している 2 つのページがあります: test1.php と test2.php。test1.php には<DIV>、「SubmitDiv」という名前のタグと「DisplayDiv」という名前のタグの 2 つのタグが含まれています。SubmitDiv には、チェックボックスと送信ボタンがあります。チェックボックスをオンにして送信ボタンをクリックすると、DisplayDiv divタグにtest2.phpが表示されるようにしたいです。私はすでにそれを理解しています。

ただし、今は test2.php が test1.php からデータを受け取り、そのデータを処理する必要があります。この場合、チェックボックスの名前「chk」を受け取り、echo コマンドでそれを出力します。これは、これをどのように行うかについて私が少し困惑しているところです。答えを少し探した後、これは私がこれまでに書いたものです：

test1.php:

<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<meta charset="utf-8">
<script type="text/javascript">
    function sendQuery() {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'test2.php',
            data: $('#SubmitForm').serialize(),
            success: function() {
                $('#DisplayDiv').load('test2.php');
            }
        });
        return false;
    }
</script>
<body>
    <form id="SubmitForm" action="" method="post">
        <div id="SubmitDiv" style="background-color:black;color:white;">
            <input type="checkbox" id="chk" name="chk" form="SubmitForm" value="chk">CHECK</input><br>
            <button name="submit" id="submit" type="submit" form="SubmitForm" onclick="return sendQuery();">Submit</button>
        </div>
    </form>
    <div id="DisplayDiv"></div>
</body>
</html>

test2.php:

<html>
<meta charset="utf-8">
<?php
    $chk = $_POST['chk'];
    echo $chk;
?>
</html>

ただし、送信ボタンがクリックされると、本来のように DisplayDiv に test2.php を表示するのではなく、ページを更新するだけです。データを test2.php に渡し、それを DisplayDiv セクション内に表示する方法についてのアイデアはありますか?

score 2 · Accepted Answer

.load 関数の代わりに以下を使用します

success: function(response) {
     $('#DisplayDiv').html(response);
}

score 1 · Accepted Answer

e.preventDefault();false onclick を返さないため、最初に sendQuery 関数を削除する必要があります。

次に、AJAX 呼び出しを次のように変更します。

$.ajax({
    type: 'POST',
    url: 'test2.php',
    data: $('#SubmitForm').serialize(),
    success: function(data) {
        $("#DisplayDiv").html(data);
    }
});

score 0 · Accepted Answer

これは機能します：

$.ajax({
    type: 'GET',
    url: 'data.php',
    data: {
        "id": 123,
        "name": "abc",
        "email": "abc@gmail.com"
    },
    success: function (ccc) {
        alert(ccc);
        $("#result").html(ccc);
    }
});

jQuery を含める:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

score -1 · Accepted Answer

-1

data.php

  echo $id = $_GET['id']; 
  echo $name = $_GET['name'];
  echo $email = $_GET['email'];

于 2016-10-04T22:11:38.853 に答える

javascript - AJAXを介してPHPページにデータを渡し、そのページを別のDIVに表示する方法は?

5 に答える 5

Related

Reference