2012-03-20 5 views
0

это простой пример, как отправить форму с помощью формы плагинов Jquery и извлечения данных с использованием формата HTML HTML кодотправить форму с помощью JQuery Ajax Form Plugin и php?

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 

    <script> 
// prepare the form when the DOM is ready 
    $(document).ready(function() { 
     // bind form using ajaxForm 
     $('#htmlForm').ajaxForm({ 
      // target identifies the element(s) to update with the server response 
      target: '#htmlExampleTarget', 

      // success identifies the function to invoke when the server response 
      // has been received; here we apply a fade-in effect to the new content 
      success: function() { 
       $('#htmlExampleTarget').fadeIn('slow'); 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 
<form id="htmlForm" action="post.php" method="post"> 
    Message: <input type="text" name="message" value="Hello HTML" /> 
    <input type="submit" value="Echo as HTML" /> 
</form> 
<div id="htmlExampleTarget"></div> 
</body> 
</html> 

PHP код

<?php 
echo '<div style="background-color:#ffa; padding:20px">' . $_POST['message'] . '</div>'; 
?> 

это просто отлично работает , что мне нужно знаю, что если мне нужно Сериализовать поля формы, чтобы как передать этот параметр через функцию JS , также я хочу показать загружаемое сообщение при обработке формы , как я должен это сделать tha nk you

+0

Для загрузки сообщения вы можете использовать функцию beforeSend таким образом: beforeSend: функция() { $ ("# htmlExampleTarget") HTML ('Загрузка ...'); \t \t}, – Kamal

ответ

2

Чтобы запрограммировать и опубликовать это на php-странице, вам нужно только jQuery на вашей странице. никакой другой плагин не нужен

$("#htmlForm").submit(function(){ 

    var serializedData= $("#htmlForm").serialize(); 
    $.post("post.php", { dat: serializedData},  function(data) { 
     //do whatever with the response here 
    }); 

    }); 

Если вы хотите, чтобы показать сообщение загрузки, вы можете сделать это, прежде чем начать запись вызова. Предполагая, что вы Div с идентификатором "divProgress" присутствует на странице

HTML

<div id="divProgress" style="display:none;"></div> 

Script

$(function(){ 
    $("#htmlForm").submit(function(){ 

    $("#divProgress").html("Please wait...").fadeIn(400,function(){ 

     var serializedData= $("#htmlForm").serialize(); 
     $.post("post.php", { dat: serializedData},function(data) { 
      //do whatever with the response here 
      }); 

     });  
    }); 
}); 
+0

Это не работает на нем все, когда я использовал его, он прошел форму, как правило, без аякса у всех – Marco

+0

@Marco: Если id id формы является htmlForm, он будет работать. Вы получаете некоторые ошибки? – Shyju

0

Ответ отправленный Shyju должен работать нормально. Я думаю, что «дат» следует указывать в кавычках.

$.post("post.php", { 'dat': serializedData},function(data) { 

... 

} 

ИЛИ просто,

$.post("post.php", serializedData, function(data) { 

... 

} 

и получить доступ к данным, используя $ _POST в PHP.

ПРИМЕЧАНИЕ: Извините, я не тестировал код, но он должен работать.

0

Библиотека Phery делает это за кулисами для вас, просто создайте форму, и она автоматически представит ваши входы в форме. . http://phery-php-ajax.net/

<?php 
    Phery::instance()->set(array(
    'remote-function' => function($data){ 
     return PheryResponse::factory('#htmlExampleTarget')->fadeIn('slow'); 
    } 
))->process(); 
?> 
<?php echo Phery::form_for('remote-function', 'post.php', array('id' => ''); ?> //outputs <form data-remote="remote-function"> 
    Message: <input type="text" name="message" value="Hello HTML" /> 
    <input type="submit" value="Echo as HTML" /> 
</form> 
<div id="htmlExampleTarget"></div> 
</body> 
</html> 
Смежные вопросы