使用ajax将客户端JSON传递到后端

Question

我正在尝试基于一个或另一个API的JSON响应来连接2-3个API的行为。我使用的是ASP.NET MVC和vanilla JS。

目标是使用places (Algolia)，这样用户就可以从自动完成输入框中选择一个地点，并在选择之后将名称变量从JSON传递给下一个API，即天气API (DarkSky)。

Algolia API完全基于JS，并使用Algolia提供的以下html元素和脚本在客户端运行：

<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属性，即"New York“，并将其传递给我的后端应用程序接口客户机，这样我就可以将它用于对DarkSky应用程序接口的GET请求。

我制作了一个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脚本ok。

谢谢!

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

ajax调用中的url参数应该是baseUrl+"controllerName/actionName"的格式，其中'baseUrl‘是告诉您域名的URL的最终部分。例如- 'http://localhost:23456/api‘

如下所示：

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