Есть какой-нибудь универсальный и простой ajax-скрипт для отправки и удаления данных без перзагрузки?

Question

[prrrrrrr]

Подскажите, может есть какой-нибудь универсальный и простой ajax-скрипт для отправки и удаления данных без перзагрузки?

К примеру если добавление выглядит так:

<?php
	$data = $_POST;
	if ( isset($data['add']) )
	{ $posts = R::dispense('posts');
			
	$posts->head = $data['head'];
	$posts->desc = $data['desc'];
			
	R::store($posts);
			
	header("Location: /"); }
?>

А удаление так:

<?php
	$id = $_GET['id'];
	$posts = R::load('posts', $id);
	R::trash($posts);
 
	header("Location: /");
?>

Answer 1

[Дима Паутов]

jquery метод напишу, что бы не расписывать

Добавить

//jquery
$.ajax({
  url: '/posts',
  type: 'POST',
  data: { // JSON или FormData, в зависимости от того, как собираете данные
    head: 'Заголовок',
    desc: 'Описание'
  }
})
.done(response => {
  console.log(response)
});

//native js
fetch('/posts', {
  method: 'POST',
  body: { // JSON или FormData, в зависимости от того, как собираете данные
    head: 'Заголовок',
    desc: 'Описание'
  }
})
.then(response => {
  console.log(response)
})

Удалить

//jquery
$.ajax({
  url: '/posts',
  type: 'DELETE',
  data: { // JSON или FormData, в зависимости от того, как собираете данные
    id: id
  }
})
.done(response => {
  console.log(response)
});

//native js
fetch('/posts', {
  method: 'DELETE',
  body: { // JSON или FormData, в зависимости от того, как собираете данные
     id: id
  }
})
.then(response => {
  console.log(response)
})

Далее просто смотрите соответствующий тип запроса и делаете действие

Comments

[prrrrrrr]

Почему может не срабатывать отправка?

[Дима Паутов]

prrrrrrr, подключить jquery или использовать нативный js или любую другую библиотеку для отправки ajax запросов. Обновил ответ, дописав нативную версию отправки ajax

[prrrrrrr]

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
$("#FormID").submit(function(e) {
    var form = $(this);
    var url = form.attr('action');
    $.ajax({
           type: "POST",
           url: url,
           data: $("#FormID").serialize(),
           success: function(data) {
			   c = "hello";
               $('#FormStatus').text(c);
           }
         });
    e.preventDefault();
});
</script>

ничего не происходит. только текст выводится "hello"

[Дима Паутов]

prrrrrrr, а что должно произойти? Запрос ушёл успешно, вот и вывелось hello. success вызывается тогда, когда запрос успешно отправлен, что и произошло, вы успешно отправили запрос и выполнился код внутри success

[prrrrrrr]

Дима Турков, да, только данные не отправились

[Дима Паутов]

prrrrrrr, e.preventDefault(); поставьте перед $.ajax для начала и дальше смотрите консоль, распечатайте formData и т.п. действия

[prrrrrrr]

Дима Турков, что такое formData и что значит распечатать?

[Дима Паутов]

prrrrrrr, $("#FormID").serialize() - этот метод собирает данные со всех полей указанной формы, поэтому и называю formData. Закоментируйте ajax блок и напишите так
console.log($("#FormID").serialize());
в консоль выведется то, что вы хотите отправить, если там всё ок, раскоментируйте обратно ajax блок и отправьте снова, если запрос ушёл успешно, зайдите в панель разработчика, откройте вкладку network и сделайте запрос снова. Там отобразиться куда вы отправили и что вы отправили, и каким методом. Далее уже смотрите, если всё отправилось верно, значит проблема у вас на беке

[prrrrrrr]

Дима Турков,

[prrrrrrr]

Дима Турков, в консоли разр-ка Form Data все данные есть. но они не отправляются

[Дима Паутов]

prrrrrrr, У вас активна вкладка Headers, в ней указаны все данные запроса. Внизу этого списка есть блок, в котором указано, какие данные из формы вы отправили, посмотрите их

[Дима Паутов]

prrrrrrr, они отправились, 200 код пришёл. Запрос успешно отправлен, значит вы у себя что-то не правильно делаете

[prrrrrrr]

Дима Турков, но если я убираю скрипт, всё нормально. только работает с обновлением страницы. в коде ajax беда? так всё перегуглил, везде практически одно и то же

[Дима Паутов]

prrrrrrr, убрав код, вы отправили форму обычным способом, поэтому и всё ок. После отправки распечатайте POST у себя, что в него пришло. Отлаживайте поэтапно.