Передача JSON на стороне клиента в серверную часть с использованием ajax
Пытаюсь связать поведение 2-3 API на основе ответов JSON от того или иного API. Я использую ASP.NET MVC и vanilla JS.
Цель состоит в том, чтобы использовать API мест (Algolia), чтобы пользователь мог выбрать место из поля ввода автозаполнения и после выбора передать переменную имени из JSON в следующий API, который является API погоды (DarkSky).
Algolia API полностью основан на JS и работает на стороне клиента с использованием следующих HTML-элементов и скриптов, предоставленных Algolia:
<input type = "search" id = "address-input" placeholder = "Search for a place.." />
<script>
var placesAutocomplete = places({
appId: "my-app-id",
apiKey: "my-api-key",
container: document.querySelector('#address-input')
});
</script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]"></script>
После выбора места API возвращает следующую структуру JSON:
{
"query": "new york",
"suggestion": {
"name": "New York",
"country": "United States of America",
...},
...
}
Я хочу использовать атрибут имени, то есть «Нью-Йорк», и передать его моему серверному клиенту API, чтобы я мог использовать его для запроса GET к API DarkSky.
Я сделал сценарий AJAX для отправки этого значения обратно в мой MVC-контроллер, но после множества проб и ошибок я до сих пор не знаю, как настроить действие контроллера для получения данных и сделать его доступным для остальной части back- конец.
Вот ajax-скрипт:
<script>
placesAutocomplete.on('change', function resultSelected(e) {
var place = e.suggestion.name || '';
$.ajax({
type: 'POST',
url: 'Ajax', //name of the action in the Home controller
data: { place }
})
});
</script>
Не могли бы вы указать мне, как должно выглядеть мое действие и в порядке ли мой сценарий ajax.
Спасибо!
Ответы 2
параметр url в вызове ajax должен иметь формат baseUrl+"controllerName/actionName", где «baseUrl» — это окончательная часть URL-адреса, которая сообщает вам доменное имя. Например - "http://локальный:23456/апи"
Что-то вроде этого:
url: baseUrl + "home/actionName" //here 'home' is the controller name as mentioned in the question
Ваше действие контроллера должно выглядеть примерно так:
public class PlaceController : Controller
{
[HttpPost]
public JsonResult Search(string place)
{
// process
return Json(place, JsonRequestBehavior.AllowGet);
}
}
Ваш AJAX-запрос
var place = "New York";
$.ajax({
type: 'POST',
url: "/Place/Search", or // @Url.Action("Search", "Place")
dataType: "json",
contentType: "application/json; charset=utf-8",
data: { place : place },
success: function(data){
}
});