Ajax не будет инициировать POST-запрос к php-форме

Question

По какой-то причине моя форма не будет опубликована, есть идеи относительно того, почему (я уже знаю, что все остальное на моем сервере работает)?Код ниже:

PHP

    <?php
if(isset($_POST['field1']) && isset($_POST['field2'])) {
$data = $_POST['field1'] . '-' . $_POST['field2'] . "<br>";
$ret = file_put_contents('user.txt', $data, FILE_APPEND | LOCK_EX);
if($ret === false) {
    die('There was an error writing this file');
}
}
?>

---

https://pastebin.com/hHeMD4Mq

---

HTML / AJAX JS

---

<form id ="form">
<p>Name:</p>
<input name="field1" type="text" id ="name" />
<h3>&nbsp;</h3>
<p>Message:</p>
<textarea name="field2" type="text" id ="message"></textarea><br/>
<button onclick="pos();">reply</button>
</form>
</td>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function pos(){
var values=$("form").serialize();
$.post('form.php', values, function(response) {
    console.log("Response: "+response);
});}
</script>

---

https://pastebin.com/eAVE8EGS

---

демо на моем сайте:

jakesandbox.com / dnd /

(любая информация, не указанная выше, будет предоставлена)по запросу в комментариях)

Answer 1

Оказывается, ваша форма действительно отправляется нормально с GET-запросом (вы, вероятно, можете увидеть перезагрузку страницы).Это происходит, когда кнопка внутри формы не имеет определенного типа (по умолчанию отправка).

Кнопка типа «отправить» внутри формы отправляет форму, а кнопка типа «кнопка» - нет.

Просто добавьте атрибут type = "button" к вашей кнопке, и ваша проблема должна быть решена.

<button type="button" onclick="pos();">reply</button>

Answer 2

На вашем php конце для отладки, если данные действительно пришли

<?php
header('Content-Type: application/json');
echo json_encode($_POST);

Затем на вашем js

$.post('form.php', values, function(response) {
   console.log(response); // return json
});}

Answer 3

Проблема в том, что ваша кнопка на самом деле отправляет форму (которая по сути перезагружает страницу, поскольку она отправляет сама себе).Вам нужно сделать одну из двух вещей:

1. Измените свою кнопку на type="button", чтобы предотвратить ее отправку (кнопка внутри элемента формы автоматически становится кнопкой отправки):

<button type="button" onclick="pos();">reply</button>

Предотвратить действие клика (таким образом предотвращая отправку):

<button type="button" onclick="pos(event);">reply</button>
<script type="text/javascript">
function pos(e){
e.preventDefault();
var values=$("form").serialize();
$.post('form.php', values, function(response) {
    console.log("Response: "+response);
});}
</script>

-OR-

<button type="button" onclick="pos(); return false;">reply</button>