ajax 实现无刷新实现省市县(区)三级联动

最新推荐文章于 2024-08-31 15:57:06 发布
jingmeifeng
最新推荐文章于 2024-08-31 15:57:06 发布
阅读量2.1k
点赞数
文章标签： ajax webservice function string table xhtml
本文链接：https://blog.csdn.net/jingmeifeng/article/details/7438130
版权
前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="provinceStringBuilder.aspx.cs" Inherits="provinceStringBuilder" %>

<!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></title>
    <script src="js/Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            bindprovince(); //在加载的时候，绑定省的方法
            function bindprovince() {
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService.asmx/provinceData",
                    data: "{}",
                    success: function (result) {
                        var table = result.d;
                        var lth = $(table).find('tr').length; //总共有多少行距
                        // alert(lth);
                        $(table).find('tr').each(function () {
                            var myoption = "<option value=" + $(this).children().eq(0).text() + ">";
                            myoption += $(this).children().eq(1).text() + "</option>";
                            $('#Select1').append(myoption);
                        })
                    }
                })
            }

            //以上方法是绑定省的
            //下面是绑定市的方法
            $('#Select1').change(function () {
                var faid = $(this).val();
                $('#Select2').children().remove();
                //alert(faid);
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService.asmx/cityData",
                    data: "{faid:'" + faid + "'}",
                    success: function (result) {
                        var table = result.d;
                        $(table).find('tr').each(function () {
                            var myoption = "<option value=" + $(this).children().eq(0).text() + " >";
                            myoption += $(this).children().eq(1).text();
                            myoption += "</option>";
                            $('#Select2').append(myoption);
                        })
                    }
                })
            })
            //以上是绑定市的方法

            //下面是绑定县的方法
            $('#Select2').bind("change", function () {
                $('#Select3').children().remove();
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService.asmx/xianData",
                    data: "{faid:'" + $(this).val() + "'}",
                    success: function (result) {
                        var table = result.d;
                        $(table).find('tr').each(function () {
                            var myoption = "<option value=" + $(this).children().eq(0).text() + ">";
                            myoption += $(this).children().eq(1).text() + "</option>";
                            $('#Select3').append(myoption);
                        })
                    }
                })
            })

        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="mydiv">
    </div>
    <div>
        <input id="Text1" type="text" /><br />
        省：<select id="Select1">
            <option>--请选择--</option>
        </select>
        市：<select id="Select2">
            <option>--请选择--</option>
        </select>
        县：<select id="Select3">
            <option>--请选择--</option>
        </select>
    </div>
    </form>
</body>
</html>


后台代码：

添加一个web服务文件，里面的代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Text;

/// <summary>
///WebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    public WebService () {

        //如果使用设计的组件，请取消注释以下行 
        //InitializeComponent(); 
    }
    

    [WebMethod]
    public string HelloWorld() {
        return "Hello World";
    }
  

     [WebMethod]
    public string provinceData()
    {
        string str = "select provinceID,province from province";
        DataTable dt = sqlhelper.getprovince(str, CommandType.Text);
        StringBuilder sb = new StringBuilder();
        sb.Append("<table>");
        foreach (DataRow row in dt.Rows)
        {
            sb.Append("<tr><td>");
            sb.Append(row["provinceID"].ToString()+"</td><td>");
            sb.Append(row["province"].ToString()+"</td></tr>");
        }
        sb.Append("</table>");
        return sb.ToString();
    }
    [WebMethod]
    public string cityData(string faid)
    {
        string str = "select cityID,city from city where father=@fid";
        DataTable dt = sqlhelper.getprovince(str, CommandType.Text, new SqlParameter("@fid", faid));
        StringBuilder sb = new StringBuilder();
        sb.Append("<table>");
        foreach (DataRow row in dt.Rows)
        {
            sb.Append("<tr>");
            sb.Append("<td>" + row["cityID"].ToString() + "</td>");
            sb.Append("<td>" + row["city"].ToString() + "</td>");
            sb.Append("</tr>");
        }
        sb.Append("</table>");
        return sb.ToString();
    }

    [WebMethod]
    public string xianData(string faid)
    {
        string str = "select areaID,area from area where father=@fid";
        DataTable xdt = sqlhelper.getprovince(str, CommandType.Text, new SqlParameter("@fid", faid));
        StringBuilder sb = new StringBuilder();
        sb.Append("<table>");
        foreach (DataRow row in xdt.Rows)
        {
            sb.Append("<tr>");
            sb.Append("<td>"+row["areaID"].ToString()+"</td>");
            sb.Append("<td>" + row["area"].ToString() + "</td>");
            sb.Append("</tr>");
        }
        sb.Append("</table>");
        return sb.ToString();
    }
}



还有一个sqlhelper类，里面的代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;

/// <summary>
///sqlhelper 的摘要说明
/// </summary>
public class sqlhelper
{
    
 public sqlhelper()
 {
  //
  //TODO: 在此处添加构造函数逻辑
  //
 }

    private static string str = ConfigurationManager.ConnectionStrings["sqlcnn"].ConnectionString;  //数据库连接字符串在web.config中定义
    /// <summary>
    /// 得到数据以datatable的形式返回
    /// </summary>
    /// <param name="sqltext">执行的命令文本</param>
    /// <param name="commandtype">命令类型</param>
    /// <param name="sq">命令参数</param>
    /// <returns></returns>
    public static DataTable getprovince(string sqltext,CommandType commandtype,params SqlParameter[] sq)
    {
        DataTable dt = null;
        using (SqlConnection con = new SqlConnection(str))
        {
            using (SqlCommand com = con.CreateCommand())
            {
                com.CommandText = sqltext;
                com.Parameters.AddRange(sq);
                SqlDataAdapter da = new SqlDataAdapter(com);
                dt = new DataTable();
                da.Fill(dt);
            }
        }
        return dt;
    }

  
}
jingmeifeng
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax 实现无刷新实现省市县(区)三级联动

前台代码： $(function () { bindprovince(); //在加载的时候，绑定省的方法 function bindprovince() { $.ajax({ type:
复制链接

扫一扫