Данные формы POST Ajax отправляются как запрос GET

Question

Я создаю чат-систему. Я отправляю данные формы через ajax-метод в jquery. Моя первая проблема заключается в том, что метод ajax не отправляет данные на proccess.php, и страница переходит к перенаправлению на себя.

<div id="chatOutput"></div> 
<form id="myform"> 
    <textarea id="chatInput" name="chatInput"></textarea> 
    <input type="submit" id="send" name="send" value="send" /> 
</form> 

и сценарий:

$('#send').click(function() { 
    $('#myform').submit(); 
    $.ajax({ 
     url: 'process.php', 
     type: 'post', 
     dataType: 'json', 
     data: $('#myform').serialize(), 
     success: function() { 
      alert("Submitted!"); // for testing 
     } 
    }); 
    return false; 
}); 

но скрипт не работает, и страница идет, чтобы обновить и я вижу переменные и его значения в адресной строке как метод GET.

Если эта проблема решена, process.php создаст файл chat.txt и добавит данные из #chatInput в него. а затем добавит данные chat.txt в #chatOutput.

После добавления данных размер div # chatOutput изменяется. Я хочу фиксировать/задавать ширину и высоту этого div. После размера фиксации, как прокрутить вниз, чтобы увидеть последний чат?

Answer 1

EDIT У вас была ошибка синтаксиса. Убедитесь, что у вас есть e.preventDefault(); как первое, что в вашем случае нажмите функцию. Тогда действие по умолчанию будет предотвращено даже тогда, когда произойдет ошибка.

$('#send').click(function(e) { 
    e.preventDefault(); //disable default action 

    $('#myform').submit(); 
     $.ajax({ 
      url: 'process.php', 
      type: 'post', 
      dataType: 'json', 
      data: $('#myform').serialize(), 
      success: function() { 
       alert("Submitted!"); // for testing 
      } 
     }); 
    }); 

    return false; //return something 
}); 

Answer 2

Вы можете просто сделать:

$('#myform').submit(function() { 
    $.ajax({ 
     url: 'process.php', 
     type: 'post', 
     dataType: 'json', 
     data: $('#myform').serialize(), 
     success: function() { 
      alert("Submitted!"); // for testing 
     } 
    }); 
    return false; 
}); 

Вы использовали $('#myform').submit();, который просто отправляет форму обычным способом и, таким образом, не обращая внимания на АЯКС т.д., после этого.

Кроме того, поместите этот код либо после самой формы или в $(function(){ ... });

Answer 3

Проблема здесь:

$('#myform').submit(); 

имитирует кнопку «Отправить» нажмите событие

Answer 4

Удалить строку:

$('#myform').submit(); 

Он подает перед собой форму Выполняется вызов r ajax.