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

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

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

источник

2013-10-02 imprisoned243

Функция 'sendQuery' выполняется вообще? вы получаете ответ? –

Просто FYI, нет необходимости в следующих строках в файле test2.php: '', '' и ''. Чистый PHP - это все, что вам нужно. – gibberish

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

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

источник

2013-10-02 20:28:26

Примечание к OP: имя var 'response' должно быть одинаковым в обеих строках. То есть вы можете изменить имя var на 'fred', но затем вы должны использовать' fred' в обоих местах. – gibberish

Спасибо. Изменение .load на .html (ответ) сделало трюк. – imprisoned243

@ imprisoned243 Подумайте о .load в этой ситуации как .ajax ({type: 'GET', url: 'test2.php'}). Также быстро взгляните на документы jquery: http://api.jquery.com/load/ и http://api.jquery.com/jQuery.ajax/ – DeeperID

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

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

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

источник

2013-10-02 20:30:40

Я подозреваю, что это, вероятно, ваша первая проблема. Поскольку e не передается и поэтому не определено, вы получаете сообщение об ошибке, и событие по умолчанию разрешено продолжать. – DeeperID

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

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

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

источник

2013-10-02 20:40:55 jonsuh

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

$.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>

источник

2016-10-04 22:08:01 vivek

-1

data.php

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

источник

2016-10-04 22:11:38 vivek

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

ответ

Смежные вопросы