时间戳

首页 > 解决方案 > 使用 ajax 将客户端 JSON 传递到后端

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

问题描述

我正在尝试根据来自一个或另一个 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#ajaxasp.net-mvcapi

解决方案

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

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

        }
    });

推荐阅读