Отправка формы с использованием jquery AJAX

Question

Я пытаюсь отправить свою форму, используя jQuery ajax, но мои данные не отправляются на PHP, в пустом массиве ничего не возвращается в массиве $_POST.

Это мой код - вот моя форма:

<form action = "/webdevelopmentpakistan/send_mail.php" method = "post" class = "myForm"   >
                <div class="row">
                    <div class="col-md-3 col-sm-12">
                        <div class="form-group">
                            <input class="form-control" id="fname" type="text" required name= "full_name" placeholder="Full Name" 
                             />
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12">
                        <div class="form-group"> 
                            <input class="form-control" type="tel" required name = "phone" placeholder="+92" id="phone" onkeypress="return isNumberKey(event)" />
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12">
                        <div class="form-group">
                            <input class="form-control" type="email" required name = "email" id="email" placeholder="Email"/>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12">
                        <div class="form-group">
                            <input class="btn popup" type="submit"    name = "submit" value="CONTACT OUR CONSULTANT"/>
                        </div>
                    </div>
                </div>
</form>

его ajax часть:

  $('form').on('submit', function (e) {
    e.preventDefault();

    var url = $(this).attr("action");
    var form_data = $(this).serialize();


    $.ajax({
            type: 'POST',
            url: url,
            data: $('.myForm').serialize() ,
            dataType : 'JSON',
            //contentType: "application/x-www-form-urlencoded",
            success: function (data) { // here I'm adding data as a parameter which stores the response

                    console.log(data); // instead of alert I'm changing this to console.log which logs all the response in console.
            },
             error:function(xhr, textStatus, thrownError, data)
             {
                 console.log("Error: " + thrownError);
                 console.log("Error: " + textStatus);


             }
                   });



    // var popup = document.getElementById("myPopup");
    // popup.classList.toggle("show");
    console.log(form_data);

});

PHP КОД, используемый на другой странице:

if(isset($_POST)) {
        echo json_encode($_POST);
    }

и это мой сериализованный массив, который я получаю при отправке формы, но он не передается php

full_name=talha&phone=012345678&email=admin%40gmail.com

Answer 1

добро пожаловать в stackoverflow, вот изменения, надеюсь, это будет работать

$.ajax({
    type: 'POST',
    url: url,
    data: $('.myForm').serialize() ,
    dataType : 'json', // changing data type to json
    success: function (data) { // here I'm adding data as a parameter which stores the response
        console.log(data); // instead of alert I'm changing this to console.log which logs all the response in console.
    }
});

в php

if(isset($_POST)) {
    echo json_encode($_POST);
}

это должно напечатать массив сообщений параметров в вашей консоли, однако вы получите массив в php.

Answer 2

Действие формы должно быть либо абсолютным, т.е. https://somewebsite.com, либо относительным URL на вашем сайте, поэтому в идеале это должно быть /some-url.php. Прочитайте о действии формы здесь

Итак, ваш открывающий тег формы должен быть

<form action = "/web-development-in-pakistan.php" method = "post" class = "myForm"  target="_self">

Так в вашем коде javascript, когда вы делаете

var url = $(this).attr("action");

Я также считаю, что в вашем ajax вызове type должно быть method, поэтому

$.ajax({
  method: "POST",
  .....
 })