如何使用按鈕或div向API發送放入請求？

我現在有一個網絡應用程序呈現項目列表。如何使用按鈕或div向API發送放入請求？

基本上在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" 
     ] 
    }

因此，所有這些都被同時渲染，和他們每個人都是要去有一個側面的按鈕一樣。當有人點擊按鈕時，我想發送一個put請求到我的API，通過將他們的用戶名添加到「likes」來修改具有相同ID的JSON對象。

任何幫助表示讚賞Thnaks

來源

2016-07-19 avantago

只是附加一個onclick事件的按鈕並在該功能中發出放入請求 – erichardson30

你有兩個選擇：

（通過JQuery例如）異步發送PUT請求您的API，然後等待來自API的響應，如果它是成功還是不是，然後檢索新的JSON數據。
將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 
});

來源

2016-07-19 19:37:03

你可以簡單地有，做一個給定id API請求的功能，然後綁定該函數的div，而你正在渲染。

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

然後，當你呈現的div名單做一些像

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

來源

2016-07-19 19:39:16 r0dney

您可以輕鬆地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

來源

2016-07-19 21:12:25

如何使用按鈕或div向API發送放入請求？

回答

相關問題