Как отправить запрос на отправку в мой API только с помощью кнопки или div?

Question

У меня есть веб-приложение прямо сейчас, которое отображает список элементов.

В основном на div-щелчке, я хочу отправить запрос на put, который просто изменяет значение моего объекта JSON.

Это структура сейчас для моих данных:

{ 
     "id": 1, 
     "title": "test-1", 
     "description": "test-1", 
     "likes": [ 
      "username-1", 
      "username-2" 
     ] 
    }, 
    { 
     "id": 2, 
     "title": "test-2", 
     "description": "test-2", 
     "likes": [ 
      "username-1", 
      "username-2" 
     ] 
    } 

Так все они, оказываемый в то же время, и каждый из них собирается иметь как кнопку на стороне. Когда кто-то нажимает на эту кнопку, я хотел бы отправить запрос на перенос в свой API, который изменяет объект JSON с тем же идентификатором, добавив свое имя пользователя в «понравится».

Любая помощь приветствуется Thnaks

Answer 1

У вас есть два варианта:

1. Послать запрос PUT асинхронно к вашему API (с помощью JQuery, например), а затем ждать ответа от API, если это успех или а затем извлекать новые данные JSON.
2. Отправляйте запрос PUT асинхронно к вашему API и заставляйте данные JSON включать новое имя пользователя в подобные данные.

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

В JQuery, чтобы сделать это, вы могли бы использовать следующий код на вашу «по щелчку» обработка событий:

$.ajax({ 
    type: 'POST', // Use POST with X-HTTP-Method-Override or directly a PUT if the browser/client supports it 
    dataType: 'json', // If your request format is JSON 
    url: "http://your-api-url", // Your API URL 
    headers: {"X-HTTP-Method-Override": "PUT"}, // You should override this if you used "POST" early X-HTTP-Method-Override set to PUT 
    data: '{"username": "theNewUsername"}', // The username/userId of the user who clicked the button 
    success: callback, // The JS function which modifies the JSON data by adding the username/userID to the JSON data or by changing all the JSON data to a new one 
}); 

Answer 2

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

const apiCall = (id)=>{//actually making api request here}; 

Затем, когда вы предоставляете список дивы сделать что-то вроде

<div onClick={apiCall.bind(null, id)} /> 

Answer 3

Вы можете легко сделать работу с библиотекой выборки GitHub в (https://github.com/github/fetch).

// Call the API page 
fetch('https://www.reddit.com/r/reactjs.json') 
.then((result) => { 
    // Get the result 
    // If we want text, call result.text() 
    return result.json(); 
}).then((jsonResult) => { 
    // Do something with the result 
    console.log(jsonResult); 
}) 

Для вашего запроса PUT с телом, принеси код будет выглядеть следующим образом:

fetch('/apiURL', { 
    method: 'PUT', 
    headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json' 
    }, 
    body: JSON.stringify({ 
    field1: value1, 
    field2: value2 
    }) 
} 

Я сделал живой пример здесь с Reddit: https://codepen.io/aamulumi/pen/NAymbW