mvc中json格式的使用方法示例

简介: View: (document).ready(function() {  GetByJquery();(document).ready(function() {
 GetByJquery();
("#ddlProvince").
View: 
<script type="text/javascript">
    $(document).ready(function() {
        GetByJquery();
        $("#ddlProvince").change(function() { GetCity() });
        $("#ddlCity").change(function() { GetDistrict() });
    });
    
    function GetByJquery() { 
        $("#ddlProvince").empty(); //清空省份SELECT控件 
        $.getJSON("/ajax/GetProvinceList", function(data) {
            $.each(data, function(i, item) {
                $("<option></option>")
                    .val(item["ProvinceID"])
                    .text(item["ProvinceName"])
                    .appendTo($("#ddlProvince"));
            });
            GetCity();
        });      
    } 
    function GetCity() { 
        $("#ddlCity").empty(); //清空城市SELECT控件
        var url ="/ajax/GetCityList/" + $("#ddlProvince").val();
        $.getJSON(url, function(data) {
            $.each(data, function(i, item) {
                $("<option></option>")
                    .val(item["CityID"])
                    .text(item["CityName"])
                    .appendTo($("#ddlCity"));
            });
            GetDistrict();
        });
    } 
    function GetDistrict() {
        $("#ddlDistrict").empty(); //清空市区SELECT控件
        var url = "/ajax/GetDistrictList/" + $("#ddlCity").val();
        
        $.getJSON(url, function(data) {
            $.each(data, function(i, item) {
                $("<option></option>")
                    .val(item["DistrictID"])
                    .text(item["DistrictName"])
                    .appendTo($("#ddlDistrict"));
            });
        });
    } 
</script>
<table><tr><td><select id="ddlProvince"/></td><td><select id="ddlCity"/></td><td><select id="ddlDistrict" /></td></tr></table> 
Controller : 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax; 
namespace MvcBBS.Controllers
{
    public class AjaxController : Controller
    {
        //
        // GET: /Ajax/ 
        /// <summary>
        /// 获取所有[省份]数据
        /// </summary>
        public ActionResult GetProvinceList()
        {
            if (!Request.IsAjaxRequest())
            {
                return Content("请不要非法方法,这是不道德的行为!");
            } 
            BLL.Province bll = new MvcBBS.BLL.Province();
            List<MvcBBS.Model.S_Province> modellist = bll.GetProvinceList(); 
            return Json(modellist);
        } 
        /// <summary>
        /// 获取某[省份]的所有[城市]数据
        /// </summary>
        public ActionResult GetCityList(int id)
        {
            if (!Request.IsAjaxRequest())
            {
                return Content("请不要非法方法,这是不道德的行为!");
            }
            BLL.Province bll = new MvcBBS.BLL.Province();
            List<MvcBBS.Model.S_City> modellist = bll.GetCityList(id);
            return Json(modellist);
        } 
        /// <summary>
        /// 获取某[城市]的所有[市区]数据
        /// </summary>
        public ActionResult GetDistrictList(int id)
        {
            if (!Request.IsAjaxRequest())
            {
                return Content("请不要非法方法,这是不道德的行为!");
            } 
            BLL.Province bll = new MvcBBS.BLL.Province();
            List<MvcBBS.Model.S_District> modellist = bll.GetDistrict(id); 
            return Json(modellist);
        } 
    }
} 


 

 

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>SayHello</title>
    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <script type="text/javascript">
        var onsuccess = function () {
            alert("提交成功!");
        }
        $(function () {
            $("#jssubmit").click(function () {
                $.ajax({
                    url: "/ajax/SayHello",
                    type: "POST",
                    data: "str=" + $("#username").val()+"&pwd=4565",
                    success: function (data) {
                        alert(data+"提交成功!");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div>
    <% using (Ajax.BeginForm("SayHello", new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "divresult", OnSuccess = "onsuccess" }))
       {%>
       <input type="text" name="str" />
       <input type="password" name="pwd" />
       <input type="submit" value="Ajax提交" />
    <%} %>
    </div>
    <div id="divresult"></div>
    <div>
        <input type="text" id="username" />
       <input id="jssubmit" type="submit" value=js提交" />
    </div>
</body>
</html>


 

 

目录
打赏
0
0
0
0
10
分享
相关文章
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
3天前
|
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
21 12
探索大型语言模型LLM推理全阶段的JSON格式输出限制方法
本篇文章详细讨论了如何确保大型语言模型(LLMs)输出结构化的JSON格式,这对于提高数据处理的自动化程度和系统的互操作性至关重要。
对比JSON和Hessian2的序列化格式
通过以上对比分析,希望能够帮助开发者在不同场景下选择最适合的序列化格式,提高系统的整体性能和可维护性。
97 3
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
Amazon商品详情API,json数据格式示例参考
亚马逊商品详情API接口返回的JSON数据格式通常包含丰富的商品信息,以下是一个简化的JSON数据格式示例参考
探索LLM推理全阶段的JSON格式输出限制方法
文章详细讨论了如何确保大型语言模型(LLMs)输出结构化的JSON格式,这对于提高数据处理的自动化程度和系统的互操作性至关重要。
368 12
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象(如字典、列表)转换为 JSON 字符串,主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化,以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象,使用 `json.loads` 方法。文中还提供了具体的代码示例,展示了如何处理不同类型的 Python 对象。
springboot中表字段映射中设置JSON格式字段映射
springboot中表字段映射中设置JSON格式字段映射
169 1
店铺所有商品列表接口json数据格式示例(API接口)
当然,以下是一个示例的JSON数据格式,用于表示一个店铺所有商品列表的API接口响应