Загрузите php контент с помощью jQuery AJAX - PullRequest
Новая
       13

Загрузите php контент с помощью jQuery AJAX

2 голосов
/ 30 января 2011

Моя проблема:

У меня есть index.html: 

<form action="toload.php" method="post">
Input: <input type="text" name="something" value="" /><br />
<input type="submit" value="Submit!" />
</form>

toload.php что-то вроде: 

<?php

echo "Your input was: " . $_POST["something"];

?>

Вопрос довольно прост.

Когда я нажимаю кнопку Submit!, я хочу динамически загружать содержимое toload.php в index.html без необходимости обновления.

Заранее спасибо!пожалуйста, прокомментируйте все необходимые пояснения.

РЕДАКТИРОВАТЬ, более подробное объяснение:

Я не уверен, что я ясен (или, может быть, я 'я не понимаю, что ответы делают из-за моего отсутствия технических навыков), поэтому я сделаю это еще раз.(переписать)

У меня есть HTML-код с кнопкой отправки, которая отправляет переменную с помощью метода POST.

Эта переменная используется файлом PHP и после определенного процесса вставляети обновить базу данных MySQL и повторить некоторые другие вещи.

Это работает JUST FINE.

Но теперь я хочу улучшить ее, избегая перезагрузки страницы (переходя к .php).

Я хочу, чтобы HTHL, являющийся выводом моего HTML-файла, динамически отображался на моей HTML-странице.

Теперь это более понятно?

Ответы [ 3 ]

3 голосов
/ 30 января 2011

как-то так с jQuery!: 

<form action="toload.php" method="post">
Input: <input type="text" id="something" name="something" value="" /><br />
<input type="submit" value="Submit!" onclick="submitme()" />
<div id="something2"></div>
</form>

и функцией отправки: 

function submitme(){
var tosend=document.getElementById("something").value;
$.ajax({
        type: 'POST',
        url: 'toload.php',
        data: 'something='+tosend,
        success: function(msg){
            if(msg){
                document.getElementById("something2").innerHTML=msg;
            }
            else{
                return;
            }
        }
    });
}
0 голосов
/ 30 января 2011

В вашем случае вы можете использовать $.post() DOCS .Если вы дали своей форме id="myForm", вы можете загрузить возвращаемые данные в родительский элемент формы в обратном вызове следующим образом: 

$('#myForm').submit(function(e){
  e.preventDefault();
  $.post("toload.php", $("#myForm").serialize(), function(data) {
    $(this).parent().html(data);
  });
});
0 голосов
/ 30 января 2011

Для этого вы должны использовать AJAX (XMLHttpRequest) - http://www.w3schools.com/XML/xml_http.asp.

(Вы сказали просто - поскольку длительная загрузка 100 КБ jQuery - это не просто ИМХО, я предложил чистое решение JavaScript)

...