Пример отправки POST через AJAX?

Question

[Евгений]

Приветствую!

Поделитесь нормальным примером скрипта для отправки POST с файлом через AJAX, пробовал вот так:

<form id="formModel" enctype="multipart/form-data">
                  <input type="text" name="title" required>
                  <input type="text" name="meta_t" required>
                  <input type="text" name="text"> 
                 <input type="file" name="imgurl">
                <button type="submit" name="submit" id="btnSubmit">Создать</button>
                </div>
             </form>

JS

$("#formModel").submit(function() {
    $.ajax({
        url: 'control',
        method: "POST",
        data: new FormData( this ),
        success: function(data) {
            $("#formModel input[name='title']").val(''),
            $("#formModel input[name='meta_t']").val(''),
            $("#btnSubmit").attr("value", "Отправлено")
        }
    });
    return false;
});

Не отправляет на прописанный в скрипте файл control, а отсылает в этот же, где находится форма

Comments

[Павел Корнилов]

Переформулируйте вопрос. Я, к примеру, ничего не понял. Кто не отправляет, какой этот же?

[Николай Чуприк]

Извините, а как вы это определяете? Что происходит в профайлере браузера во вкладке network?

[Евгений]

Павел Корнилов, Сейчас post запрос отправляется на

http://site/category/list?title=cZXc&meta_t=zxczxcz&meta_d=&meta_k=&text=&submit=

А должен на

http://site/category/control?title=cZXc&meta_t=zxczxcz&meta_d=&meta_k=&text=&submit=

как будто если бы в форме стоял action="control"

[Евгений]

Николай Чуприк, Ну да, а как по другому, только во вкладке 'Сеть' Сейчас смотрю, вообще отправляется не POST, а GET запрос...

[Евгений]

Не хочет отправлять, получается такой запрос

http://site/category/list?title=cZXc&meta_t=zxczxcz&meta_d=&meta_k=&text=&submit=

где - /category/list страница с формой
а должен запрос идти на /category/control
и submit пустой

[MaksPaverov]

Пропиши полный путь

[Евгений]

MaksPaverov, url: 'http://apotro34.ru/category/control', не выходит тоже самое

Answer 1

[MaksPaverov]

Расширение файлу поставь -_-

Comments

[Евгений]

Не понял про расширение, где поставить? Почему не отправляет на нужный URI ничего не пойму

Answer 2

[Ао]

<form onsubmit="submitForm(event)" action="control" method="POST" id="formModel" name="nameformModel" enctype="multipart/form-data">
                  <input type="text" name="title" required>
                  <input type="text" name="meta_t" required>
                  <input type="text" name="text"> 
                 <input type="file" name="imgurl">
                <button type="submit" name="submit" id="btnSubmit">Создать</button>
                </div>
             </form>

function submitForm(event){
event.preventDefault();
event.stopPropagation();
let form = document.forms.nameformModel;
let url = form.action;
let data = new FormData(form )
var akaxOptions = { method: 'POST',               
               mode: 'cors',
               credentials: 'include',
               body:data 
              };

fetch(form.action,akaxOptions ).then(function(response){
 return response.json();
}).then(function(json){
form.reset();
form.submit.value= "Отправлено";
})
}

Comments

[Евгений]

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

<?php 
if($_POST['submit'])
{  
	echo'Отлично';
}
else
{
   echo'Не Отлично';
}
?>

выходит на "Не Отлично" может скрипт какой не подключен, уже наверно разных скриптов с просторов штук 5 пробовал, не хочет работать((((

[Евгений]

submit отправляет пустой value

[Ао]

Wolfz,
https://codepen.io/anon/pen/pGvper
нажмите F12 консоль разработчика, сеть , нажмите отправить, и посмотрите параметры POST запроса, отправляет как надо, была опечатка в preventDefault() исправил, теперь без обновления страницы.

[Ао]

Wolfz, if($_POST['submit']) Зачем вы проверяете что в POST запросе вам пришла кнопка?

[Евгений]

Ао, У меня много форм на странице и таким способом в зависимости от нажатой кнопки будет выполнятся свой код. Т.е. если нажата кнопка create то один код, если delete то другой)))

if(isset($_POST['submit']) && $_POST['submit'] == 'create') 
{	
	echo '';
}
else if(isset($_POST['submit']) && $_POST['submit'] == 'delete')
{  
	echo '';
	
}
else
{
   location('list');
}

[Ао]

Wolfz, А Кнопка разве отправляется ? через new FormData(form) она не отправляется
https://codepen.io/anon/pen/pGvper

Вам наверно лучше тогда на кнопки повесить обработчики разные, а с формы убрать onsubmit

<button type="submit" name="submit" id="btnSubmit" onsubmit="submitForm(event, "create")">Создать</button>

 <button type="submit" name="submit" id="btnSubmit" onsubmit="submitForm(event, "delete)">Создать</button

а в функции

function submitForm(event, action){
event.preventDefault();
event.stopPropagation();
let form = document.forms.nameformModel;
let url = form.action;
let data = new FormData(form )
data.append("action", action);
var akaxOptions = { method: 'POST',               
               mode: 'cors',
               credentials: 'include',
               body:data 
              };

fetch(form.action,akaxOptions ).then(function(response){
 return response.json();
}).then(function(json){
form.reset();
form.submit.value= "Отправлено";
})
}

и тогда на php

if(isset($_POST['action']) && $_POST['action'] == 'create') 
{	
  echo '';
}
else if(isset($_POST['action']) && $_POST['action'] == 'delete')
{  
  echo '';
  
}
else
{
   location('list');
}

[Евгений]

Ао, Спасибо большое! Если не трудно, подскажите пожалуйста как вывести ответ сервера на странице без перезагрузки или отправить в функцию php

[Ао]

Wolfz, Не трудно. Куда Выводить будите? Допустим в div c id serverResponse

<div id=serverResponse></div>
А в пхп возвращаете то что хотите отобразить к примеру так

function ФункцияОбработкиЗапросаИВозвратОТветаКлиенту(){

if(isset($_POST['action']) && $_POST['action'] == 'create') 
{	
 $response = {"html":"<div>тут то что вы хотите отобразить на клиенте</div>"};
}

echo json_encode($response);
}

Тогда в функции js

function submitForm(event, action){
event.preventDefault();
event.stopPropagation();
let form = document.forms.nameformModel;
let url = form.action;
let data = new FormData(form )
data.append("action", action);
var akaxOptions = { method: 'POST',               
               mode: 'cors',
               credentials: 'include',
               body:data 
              };

fetch(form.action,akaxOptions ).then(function(response){
 return response.json();
}).then(function(json){
form.reset();
form.submit.value= "Отправлено";

let target = document.getElementById("serverResponse");
if(json.html!== undefined){
target.innerHTML = json.html;
}

}).catch(function(e){
console.log("Ошибка", e);
})
}

[Ао]

Wolfz, не понял что значит отправить в функцию php

Answer 3

[Евгений]

Ао, А вот здесь нет опечатки?

var akaxOptions = { method: 'POST',               
               mode: 'cors',
               credentials: 'include',
               body:data 
              };

ajaxOptions

Comments

[Ао]

:)) это имя переменой пофиг :))) так то да