Как получить данные из разных таблиц, используя JQuery

Вот пример веб-метода:

[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, чем просто создать раскрывающийся список, но это должно заставить вас начать.

Кажется, вы используете Java в качестве языка на стороне сервера, но вы не имеете ничего общего с тем, как работает back end. Самый простой ответ: вам нужно следовать этому шаблону:

1. Напишите функцию REST в Java для обработки определенного типа вызова AJAX, например, для поиска базы данных.
2. Позвоните, что функция REST с jQuery предоставляет правильные параметры.
3. Попросите обработчик jQuery правильно вставить данные в DOM, но вы хотите.

Если бы я реализовал это, я бы использовал Apache CXF для REST. CXF, как правило, самая простая вещь, которую я видел для начинающих, чтобы написать чистый уровень сервиса в Java в эти дни для чего-то подобного.