zz黑炭
2018-07-09 12:11
采纳率: 53.8%
浏览 1.5k

C# ajax读取后台接口,填充给select下拉框

C#,后台接口(post方式)来获取所有板块的名字,路由如下所示:
[HttpPost]
[Route("shuliang/getallName")]

接口返回如下json:
{
“BankuaiNames”:
[
"板块1"
"板块2"
"板块3"
"板块4"
]
}

现在想要在前台通过ajax,读取后台接口返回的json,并且用js绑定到select下拉框,
进行显示
如下图所示

图片说明

求指点

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • blownewbee 2018-07-09 12:51
    已采纳
     using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace Q694264.Controllers
    {
        [HandleError]
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                ViewData["Message"] = "Welcome to ASP.NET MVC!";
    
                return View();
            }
    
            public ActionResult About()
            {
                return View();
            }
    
            [HttpPost]
            public string getallName()
            { 
                return @"{
        ""BankuaiNames"":
        [
            ""板块1"",
            ""板块2"",
            ""板块3"",
            ""板块4"",
            ""asdf""
        ]
    }";
            }
        }
    }
    
    
     <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
        Home Page
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <h2><%: ViewData["Message"] %></h2>
    <%--    <p>
            To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
        </p>--%>
        <script type="text/javascript">
            window.onload = function () {
                $.ajax({
                    url: "/home/getallName",
                    type: "POST",
                    data: "",
                    dataType: "json",
                    success: function (data) {
                        for (var i = 0; i < data.BankuaiNames.length; i++) {
                            $("#yys").append("<option>" + data.BankuaiNames[i] + "</option>");
                        }
                    },
                    error: function (data) {
                        alert("err");
                    }
                });
            };
        </script>
        运营商:<select id="yys" name="yys">
            <option>--请选择运营商---</option>
        </select>
    </asp:Content>
    
    
    点赞 打赏 评论
  • blownewbee 2018-07-09 12:50

    图片说明

    点赞 打赏 评论
  • blownewbee 2018-07-09 12:55

    完整代码下载:https://download.csdn.net/download/caozhy/10531288 (因为审核的原因,请明天上午9点以后再访问)

    如果问题解决,请及时采纳,谢谢。

    点赞 打赏 评论

相关推荐 更多相似问题