Как корректно отправить данные из формы с помощью AJAX?

Question

[именно самое]

$(document).ready(function() {
    $("#send").on('click', function () {
        
        //отправляю POST запрос и получаю ответ
        
        $.ajax({
            type: "post",//тип запроса: get,post либо head
            url: "register.php",//url адрес файла обработчика
            data: {
                   phone : "phone",
                   name : "name"
            },//параметры запроса
            success: function (data) {
                alert(data)
            },
            error: function(data){
                console.log(data)
        }
        })
})
});

код формы вот такой

var phonemodal=`
<!-- Модаль телефона-->
 
<div id="myModalBoxPhoneModal"  class="modal fade" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Заголовок модального окна -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Оставьте ваши данные и вам перезвонят.</h4>
      </div>
      <!-- Основное содержимое модального окна -->
      <div class="modal-body">
        
        <form id="formPhone"  method="post" class="formPhone form-horizontal" role="form">
  <div class="form-group">
    <label for="inputName" class="col-xs-4 control-label">Как вас зовут?</label>
    <div class="col-xs-7">
      <input type="text" name="name" class="form-control" id="inputName" placeholder="Ваше имя?"  required>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPhone" class="col-xs-4 control-label">Ваш телефон</label>
    <div class="col-xs-7">
      <input type="phone" name="phone" class="form-control" id="inputPhone" placeholder="Введите  ваш номер телефона" required>
    </div>
  </div>
<!-- Футер модального окна -->
      <div class="modal-footer">
        <button  id="send" type="submit"  data-target="#myModalSenksPhone" data-toggle="modal" 
        class="btn myModalSenksPhone btn-primary open-form" >Оставить заявку</button>
      </div>
</form>
      </div>
      
  </div>
</div>
    </div>`;

Answer 1

[Михаил Захаров]

$(document).ready(function() {
    $("form").on('submit', function () {        
        $.ajax({
            type: "post",
            url: "register.php",
            data: {
                   "phone": phone,
                   "name": name
            },
            success: function (data) {
                alert(data)
            },
            error: function(data){
                console.log(data)
        }
        });
return false;
});
});

Comments

[именно самое]

не помогает (((

Answer 2

[Kovalsky]

Serialize:

$('form').on('submit', function() {
  $.post('register.php', $( this ).serialize());
});

Comments

[именно самое]

может кто позскажет как посмотреть консоль ошибок а то я ничего не вижу через F12,
Рецепты не помагают

[именно самое]

MaxKorz: 200 все отправилось не пойму что не так вообще! блин!

[Kovalsky]

именно самое: а сервер что получил?

[именно самое]

Никита Полевой:

Request URL:http://127.0.0.2/p.ukr/js/ajax.js
Request Method:GET
Status Code:200 OK (from disk cache)
Remote Address:127.0.0.2:80
Response Headers
Accept-Ranges:bytes
Content-Encoding:gzip
Content-Length:1481
Content-Type:application/javascript
Date:Wed, 19 Jul 2017 13:19:48 GMT
ETag:"11aa-554ab4c1ec0c7-gzip"
Last-Modified:Wed, 19 Jul 2017 13:06:16 GMT
Server:Apache/2.4.18 (Ubuntu)
Vary:Accept-Encoding
Request Headers
Provisional headers are shown
Referer:http://127.0.0.2/p.ukr/
User-Agent:Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/55.0.2883.87 Chrome/55.0.2883.87 Safari/537.36
Name
ajax.js

[Kovalsky]

именно самое: во-первых, это не тот запрос, запрос из описания должен иметь "register.php" в конце. Во-вторых, вы это скопировали из браузера. Посмотрите что получил сервер. Если он у вас на PHP, то можете создать тестовый скрипт с именем register.php и вывести содержимое входа, file_get_contents('php://input').

[именно самое]

Никита Полевой:
if(!empty($_REQUEST)) {
echo "";
var_dump($_REQUEST);
echo "";
}
вот так вот я понимаю что нет ничего в массиве $_POST

[Kovalsky]

именно самое: я не особо разбираюсь в PHP, но из кода видно, что вы проверяете не POST, а REQUEST. В любом случае никак не помогу вам здесь, разве что вот скопирую что сам нагуглил - используйте file_get_contents('php://input').

Answer 3

[Salim_Gareev]

$('body').on('submit','form',function(){
var action = $(this).attr('action'); var formdata = $(this).serialize();
	$.ajax({type: "POST",
	dataType: "script",
	data: formdata,
	url: 'http://'+document.domain+action,
	xhrFields: {withCredentials: true},
	cache: false
	});
}

Для файлов другой запрос нужен, этот не подойдет.