Передача JSON на стороне клиента на сервер с помощью ajax

Question

Я пытаюсь подключить поведение 2-3 API на основе ответов JSON от того или иного API.Я использую ASP.NET MVC и ванильный JS.

Цель состоит в том, чтобы использовать API мест (Algolia), чтобы пользователь мог выбрать место из поля ввода автозаполнения и после выбора передать переменную имени из JSON в следующий API, который является API погоды (DarkSky)).

API Algolia полностью основан на 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/places.js@1.16.4"></script>

После выбораместо, где API возвращает следующую структуру JSON:

{ 
"query": "new york", 
"suggestion": { 
"name": "New York", 
"country": "United States of America", 
...},
...
}

Я хочу использовать атрибут name, например, «Нью-Йорк», и передать его своему клиентскому API-интерфейсу, чтобы я мог использовать его для запроса GET.в сторону DarkSky API.

Я создал AJAX-скрипт для отправки этого значения обратно в мой MVC-контроллер, но после долгих проб и ошибок я все еще не знаю, как настроить действие контроллера для получения данных ии сделайте его доступным для остальной части серверной части.

Вот сценарий 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 хорошо.

Спасибо!

Answer 1

Ваше действие контроллера должно выглядеть примерно так:

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){

        }
    });

Answer 2

параметр url в вызове ajax должен иметь формат baseUrl+"controllerName/actionName", где 'baseUrl' - это определенная часть URL, которая сообщает вам имя домена. Например - 'http://localhost:23456/api'

Примерно так:

url: baseUrl + "home/actionName" //here 'home' is the controller name as mentioned in the question