Question

我有两张桌子，例如

public class Block
  {
public int ID{ set; get; }
public string Name{ set; get; }
public string Price { set; get; }
}

public class Room
{
public int ID{ set; get; }
public string Name{ set; get; }
public string Price { set; get; }
}

从这些表格中我如何从不同的表格中选择价格？例如。当用户选择名称（来自Block类）和Name（来自Room类）时。每个名称都有自己的价格，如果用户选择价格为22美元的BlockA（来自Block类）和价格为25美元的SeatingRoom（来自Room类），Javascript应该添加它们并在不同的网页中显示添加：这个DEMO概述了我需要的东西，但是在下拉菜单中有值如何从数据库中检索它，以便onClick搜索按钮它将显示计算。这是我的Ajax方法，它获取地名并填充到下拉菜单中。

        function Method() {
        ajReq = $.ajax({
            type: "POST",
            url: "Services/",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var opts = '';
                $.each(data.d, function (i) {
                    opts += '<li>' + '<a class="">' + this.Name+ '</a>' + '</li>';

                });
                $('.Dropdown').html(opts);
            }
        });
    }

这是我的onclick按钮：

        $(document).on("click", "#buttonClick", function () {
  });

我的Ajax网络方法：

        [WebMethod]
    public IEnumerable<Room> Method()
    {
        List<Room> r= data.getRoom();
        return r;
    }
data is my class name and getRoom is a method
    public List<ToBooking> getRoom()
    {
        List<Room> t= new List<Room>();
        SqlConnection myConnection = new etc..);
        SqlCommand myCommand = new SqlCommand("SELECT * FROM TableName", myConnection);

        myConnection.Open();
        SqlDataReader reader = myCommand.ExecuteReader();
        while (reader.Read())
        {
                            b.Name= reader["Name"].ToString();
        }

    }


         <div class="btn-group">
            <button type="button" id="blockss" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span id="headingFrom">From:</span><span class="caret"></span>
            </button>
            <ul class="dropdown-menu Dropdown">
                <li><a class=""></a></li>
            </ul>
        </div>

Answer 1

您似乎使用Java作为服务器端语言，但您没有包含后端实际工作方式。最简单的答案是你需要遵循这种模式：

用Java编写REST函数来处理特定类型的AJAX调用，如数据库查找。
使用jQuery调用REST函数，提供正确的参数。
让jQuery回调将数据正确地插入到DOM中，无论你想要什么。

如果我实现这个，我会使用Apache CXF作为REST。对于初学者来说，CXF通常是最简单的东西，现在用Java编写一个干净的服务层。

Answer 2

以下是一个示例网络方法：

[System.Web.Services.WebService(Namespace = "http://tempuri.org/")]
[System.Web.Services.WebServiceBinding(ConformsTo = System.Web.Services.WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class Demo : System.Web.Services.WebService
{
    public class Block
    {
        public int ID { set; get; }
        public string Name { set; get; }
        public string Price { set; get; }
    }
    [System.Web.Services.WebMethod]
    public List<Block> GetBlockList()
    {
        List<Block> result = new List<Block>();
        using (DataTable dt = new DataTable())
        {
            using (SqlConnection conn = new SqlConnection("Sql Connection String Here"))
            {
                string sql = "SELECT id, name, price FROM tableName WHERE block = @block";
                using (SqlCommand cmd = new SqlCommand(sql, conn))
                {
                    try
                    {
                        conn.Open();
                    }
                    catch (Exception e)
                    {
                        string ex = e.ToString(); // Do something with the error
                    }
                    dt.Load(cmd.ExecuteReader());
                }
            }
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                result.Add(new Block(){
                    ID = int.Parse(dt.Rows[i].ItemArray.GetValue(0).ToString()),
                    Name = dt.Rows[i].ItemArray.GetValue(1).ToString(),
                    Price = dt.Rows[i].ItemArray.GetValue(2).ToString()
                });
            }
        }
        return result;
    }
}

现在AJAX生成一个下拉列表以及下拉列表的事件处理程序，以便在选择更改时显示价格：

$(document).ready(function (){
    $.ajax({
        type: "POST",
        url: "/Services/GetBlockList",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        failure: function () { alert("failure"); },
        error: function () { alert("error"); },
        success: function (response) {
            var row = response.d;
            var html = "<select id=\"BlockList\">";
            html += "<option value=\"0\">Select</option>";
            $.each(row, function (index, item) {
                html += "<option value=\"" + item.Price + "\">";
                html += item.Name;
                html += "</option>";
            });
            html += "</select>";
            $("#htmlBody").append(html);
        }
    });
    $("#BlockList").change(function () {
        alert("Price: " + $(this).val());
    });
});

这是它的基础知识。当然，你可以使用AJAX做更多的事情，而不仅仅是生成一个下拉列表，但这应该可以让你开始。

如何使用JQuery从不同的表中获取数据

2 个答案: