Как передать данные на страницу PHP через AJAX, а затем отобразить эту страницу в другом DIV?

У меня есть 2 страницы, с которыми я работаю: test1.php и test2.php. test1.php содержит 2 тега <DIV>, один из которых называется «SubmitDiv», а другой — «DisplayDiv». В SubmitDiv есть флажок и кнопка отправки. Когда флажок установлен и нажата кнопка отправки, я хотел бы, чтобы он отображал test2.php в теге div DisplayDiv. Я уже так понял.

Однако теперь я хочу, чтобы 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>

Однако при нажатии кнопки отправки все, что она делает, это обновляет страницу, а не отображает test2.php в DisplayDiv, как это должно быть. Любые идеи о том, как передать данные в test2.php, а затем также отобразить их в разделе DisplayDiv?


javascript php jquery ajax pass-data
person imprisoned243    schedule 02.10.2013    source источник
comment
функция sendQuery вообще выполняется? вы получаете какой-либо ответ обратно?   -  person gloomy.penguin    schedule 03.10.2013
comment
К вашему сведению, в файле test2.php нет необходимости в следующих строках: <html>, <meta etc> и </html>. Чистый PHP — это все, что вам нужно.   -  person cssyphus    schedule 03.10.2013

Ответы (5)


arrow_upward
2
arrow_downward

Вместо функции .load используйте следующее

success: function(response) {
     $('#DisplayDiv').html(response);
}
person Kemal Dağ    schedule 02.10.2013
comment
Примечание к OP: имя переменной response должно быть одинаковым в обеих строках. То есть вы можете изменить имя переменной на fred, но тогда вы должны использовать fred в обоих местах. - person cssyphus; 03.10.2013
comment
@imprisoned243 Думайте о .load в этой ситуации как о .ajax({type: 'GET', url: 'test2.php'}). Также бегло просмотрите документы jquery: api.jquery.com/load и api.jquery.com/jQuery.ajax - person DeeperID; 03.10.2013

arrow_upward
1
arrow_downward

Если вы хотите использовать e.preventDefault();, вы должны передать событие функции

function sendQuery(e) {
        e.preventDefault();
  //...
}

В противном случае я предполагаю, что ваша форма просто отправляется по клику.

person Sébastien    schedule 02.10.2013
comment
Я подозреваю, что это, вероятно, ваша первая проблема. Поскольку e не передается и, следовательно, не определено, вы получаете сообщение об ошибке, и разрешено выполнение события по умолчанию. - person DeeperID; 03.10.2013

arrow_upward
1
arrow_downward

Сначала вы должны удалить e.preventDefault(); в функции sendQuery, потому что она не возвращает false при нажатии.

Затем измените вызов AJAX следующим образом:

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

arrow_upward
0
arrow_downward

Это работает:

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

Включить jQuery:

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

arrow_upward
-1
arrow_downward

данные.php

  echo $id = $_GET['id']; 
  echo $name = $_GET['name'];
  echo $email = $_GET['email'];
person vivek    schedule 04.10.2016