Jquery пост, а затем мгновенно отображать опубликованные данные на той же странице

Question

Как я могу опубликовать данные с помощью ajax и отобразить опубликованные данные в div на той же странице без обновления страницы?

Answer 1

Для этого вам не следует отправлять форму, а собирать данные формы с помощью события щелчка, отправлять данные через AJAX и, как последнее, ... вводить данные в элемент DIV.Например,

jQuery

$("#submitdata").click(function() {
  var FormVal={ datafield1:$('#field1').val(),
                datafield2:$('#field2').val()};

  $.ajax({
    type: "POST",
    url: "myupdatepage.cfm",
    dataType: "json",
    data: FormVal,
    async: false,
    success: function(response) { 
               $('#fillmein').html($('#field1').val()+'<br />'+$('#field1').val()); // Assign the values to the DIV
             }
  });
});

HTML

<form action="">
  <input type="text" id="field1">
  <input type="text" id="field2">

  <input type="button" id="submitdata" value="Submit data" />
</form>

<div id="fillmein"></div>

Answer 2

Попробуйте разметить что-то вроде этого ...

<form action="http://google.co.uk/search" method="get" onsubmit="postTheForm(this); return false;">
    <input type="hidden" name="q" value="Stackoverflow"/>
    <input type="submit" value="Click here"/>
</form>
<div id="postResults"></div>

С таким скриптом ...

function postTheForm(theForm){
    $.post(
        theForm.action, 
        $(theForm).serializeArray(), 
        function(data, textStatus, xmlHttpRequest){
            $("#postResults").html(data);
        }
    );
}

В этом примере используется метод GET, но это только потому, что Google нене принимайте POST - но принцип должен заставить вас работать, а затем вы можете перейти на POST (при условии, что POST подходит в вашем случае)

Answer 3

лучший плагин формы jquery http://jquery.malsup.com/form/ даже возможная загрузка файлов - ajaxed