zoukankan      html  css  js  c++  java
  • Ajax方法请求WebService实现多级联动

    //Web服务页面
    //**在WebService中需要取消注释和加上跨域,才能够调用到。**
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    
    namespace Pull_down_List
    {
        /// <summary>
        /// WebService1 的摘要说明
        /// </summary>
        [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        [System.ComponentModel.ToolboxItem(false)]
        // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。 
         [System.Web.Script.Services.ScriptService]
        public class WebService1 : System.Web.Services.WebService
        {
            CityDal dal = new CityDal();
            [WebMethod]
            public List<City> SelectCity(int Pid)
            {
                return dal.SelectCity(Pid);
            }
    
        }
    }
    
    
    
    //Mvc显示页面
    
    @{
        ViewBag.Title = "Index";
    }
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <h2>多级联动</h2>
    
    <div class="form-inline">
        <div class="row">
            <div class="col-lg-12">
                <select class="form-control" id="select1" onchange="load2()">
                    <option value="value">-请选择-</option>
                </select>
                <select class="form-control" id="select2" onchange="load3()">
                    <option value="value">-请选择-</option>
                </select>
                <select class="form-control" id="select3">
                    <option value="value">-请选择-</option>
                </select>
            </div>
        </div>
    </div>
    
    //Ajax实现调用
    <script>
        $(function () {
            load1(0);
        })
    
        function load1(pid) {
            var o = { Pid: pid };
    
            $.ajax({
                url: "https://localhost:44328/WebService1.asmx/SelectCity",
                data: JSON.stringify(o),
                type: "post",
                dataType: "json",
                contentType: "application/json",
                success: function (data) {
                    $(data.d).each(function () {
                        $("#select1").append('<option value=" ' + this.ID + '">' + this.Name + '</option>');
                    })
                }
            })
        }
    
    
        function load2() {
            var pid = $("#select1").val();
            var o = { Pid: pid };
            $("#select2").empty();
            $.ajax({
                url: "https://localhost:44328/WebService1.asmx/SelectCity",
                data: JSON.stringify(o),
                type: "post",
                dataType: "json",
                contentType: "application/json",
                success: function (data) {
                    $(data.d).each(function () {
                        $("#select2").append('<option value=" ' + this.ID + '">' + this.Name + '</option>');
                    })
                }
            })
        }
    
        function load3() {
            var pid = $("#select2").val();
            var o = { Pid: pid };
            $("#select3").empty();
            $.ajax({
                url: "https://localhost:44328/WebService1.asmx/SelectCity",
                data: JSON.stringify(o),
                type: "post",
                dataType: "json",
                contentType: "application/json",
                success: function (data) {
                    $(data.d).each(function () {
                        $("#select3").append('<option value=" ' + this.ID + '">' + this.Name + '</option>');
                    })
                }
            })
        }
    </script>
    
    
    
    
    
    
  • 相关阅读:
    android SearchView配置
    把cmd命令行制作成bat程序文件
    2020 rou-yi开源框架后台运行
    android studio 干净卸载手机app只需三步
    android textview 部分内容的颜色字体修改
    16进制颜色编码-透明色
    数据结构——二叉查找树
    Java中的集合(一)——集合接口
    Effective Java阅读笔记——创建和销毁对象(一)
    数据结构——二叉树
  • 原文地址:https://www.cnblogs.com/xuxueming/p/11913713.html
Copyright © 2011-2022 走看看