Как отправить форму с помощью AJAX / JSON? - PullRequest
Новая
       5

Как отправить форму с помощью AJAX / JSON?

5 голосов
/ 09 августа 2010

В настоящее время мой AJAX работает так:

index.php 

<a href='one.php' class='ajax'>One</a>    
<div id="workspace">workspace</div>

one.php 

$arr = array ( "workspace" => "One" );
echo json_encode( $arr );

ajax.js 

jQuery(document).ready(function(){
    jQuery('.ajax').live('click', function(event) {
        event.preventDefault();
        jQuery.getJSON(this.href, function(snippets) {
            for(var id in snippets) {
                jQuery('#' + id).html(snippets[id]);
            }
        });
    });
});

Над кодом работает отлично. Когда я нажимаю ссылку 'One' , выполняется one.php и строка "One" загружается в рабочее пространство DIV .

Вопрос:

Теперь я хочу отправить форму с AJAX. Например, у меня есть форма в index.php , как это. 

<form id='myForm' action='one.php' method='post'>
 <input type='text' name='myText'>
 <input type='submit' name='myButton' value='Submit'>
</form>

Когда я отправляю форму, one.php должен напечатать значение текстового поля в рабочей области DIV. 

$arr = array ( "workspace" => $_POST['myText'] );
echo json_encode( $arr );

Как кодировать js для отправки формы с помощью AJAX / JSON.

Спасибо

Ответы [ 4 ]

8 голосов
/ 18 августа 2010

Вот мое полное решение: 

jQuery('#myForm').live('submit',function(event) {
    $.ajax({
        url: 'one.php',
        type: 'POST',
        dataType: 'json',
        data: $('#myForm').serialize(),
        success: function( data ) {
            for(var id in data) {
                jQuery('#' + id).html(data[id]);
            }
        }
    });
    return false;
});
8 голосов
/ 09 августа 2010

Отправить форму легко: 

$j('#myForm').submit();

Однако это вернет всю страницу назад.

Публиковать сообщения через Ajax также легко: 

$j.ajax({
    type: 'POST',
    url: 'one.php',
    data: { 
        myText: $j('#myText').val(), 
        myButton: $j('#myButton').val()
    },
    success: function(response, textStatus, XMLHttpRequest) {  
        $j('div.ajax').html(response);
    }
});

Если вы хотите что-то сделать с результатом, у вас есть два варианта - вы можете либо явно установить функцию success (что я делал выше), либо вы можете использовать вспомогательный метод load: 

$j('div.ajax').load('one.php', data);

К сожалению, есть один неприятный момент, с которым вы застряли: заполнение этого data объекта переменными формы для публикации.

Однако это должен быть довольно простой цикл.

2 голосов
/ 09 августа 2010

Посмотрите на функцию $.ajaxSubmit в плагине jQuery Form . Должно быть так просто, как 

 $('#myForm').ajaxSubmit();

Вы также можете привязать событие отправки формы, чтобы все представления проходили через AJAX, как показано в примере на связанной странице.

1 голос
/ 09 августа 2010

Вы можете отправить форму с помощью метода jQuery $.ajax следующим образом: 

$.ajax({
 url: 'one.php',
 type: 'POST',
 data: $('#myForm').serialize(),
 success:function(data){
   alert(data);
 }
});
...