Передать данные с формы с помощью ajax

240

13 декабря 2017, 22:00

Есть форма

<form  id="addForm"  enctype='multipart/form-data'>
<input type=hidden name='action' value='add'>
Имя:<input type=text name="name"><br><br>
Возраст:<input type=text name="age"><br><br>
Баллы:<input type=text name="points"><br><br>
Город:<input type=text name="city"><br><br>
<input type=file name="file" accept="image/*"><br><br>
<input type=submit value="Добавить студента">

Есть javascript

var form = $('#addForm')[0];
var formData = new FormData(form);
$.ajax({
    url : 'ajax.php',
    type : 'POST',
    data : formData,
    processData: false,
    contentType: false,
    success : function(data) {       
        $("#students").html(data);   
    }
});

Есть php

if (isset($_POST['action']) && $_POST['action']=='add')
{
if (isset($_REQUEST['name'])) $name=$_REQUEST['name'];
if (isset($_REQUEST['age'])) $age=$_REQUEST['age'];
if (isset($_REQUEST['points'])) $points=$_REQUEST['points'];
if (isset($_REQUEST['city'])) $city=$_REQUEST['city'];

...Дальше я заношу эти данные в базу данных

При нажатии на кнопку, данные должны передаваться с помощью ajax на сервер. Но ничего не передаётся. А если без ajax просто в форме написать action='name.php', то нормально работает.

С ajax в адресной строке появляется

localhost/iloveyou.html?action=add&name=%D0%98%D0%B2%D0%B0%D0%BD&age=67&points=54&city=%D0%9C%D1%83%D1%85%D0%BE%D1%81%D1%80%D0%B0%D0%BD%D1%81%D0%BA&file=4.jpg

Значит что-то происходит, но не то, что я хочу.

Answer 1

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

<input type=submit value="Добавить студента" id="submit-btn">
                                             ^----- например такой идентификатор

в javascript:

$(document).on('click', '#submit-btn', function(e){
    e.preventDefault(); // чтобы небыло принудительной отправки формы
    var form = $('#addForm')[0];
    var formData = new FormData(form);
    $.ajax({
        url : 'get.php',
        type : 'POST',
        data : formData,
        processData: false,
        contentType: false,
        success : function(data) {       
            $("#students").html(data);   
        }
    });
});

Сразу напомню, что файлы и информация о них будет сваливаться в глобальный массив $_FILES