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

【问题标题】：Passing client-side JSON to back-end using ajax使用 ajax 将客户端 JSON 传递到后端
【发布时间】：2019-10-15 01:36:06
【问题描述】：

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

目标是使用地点 API (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", 
...},
...
}

我想使用名称属性（即“New York”）并将其传递给我的后端 API 客户端，以便我可以将其用于向 DarkSky API 的 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 脚本是否正常。

谢谢！

【问题讨论】：

标签： c# ajax asp.net-mvc api

【解决方案1】：

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

【讨论】：

【解决方案2】：

您的控制器操作应如下所示：

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

        }
    });

【讨论】：