0

我有一个 web jsp web 应用程序。在一页中我需要两个下拉列表。当我从 dd1 中选择一个值时，第二个下拉列表将根据该值填充。如何从 javascript 或 jQuery 中的下拉 1 更改事件中调用 java 函数？

我有例子，但那是调用jsp页面，但我需要java方法并发送我从dropdown1得到的参数

这是我的下拉 dd1。所以如果我选择tom我必须在dd2中找到tom的相关信息。

            <td>
              <select  id="dd1">
                    <option value="1">john</option>
                    <option value="2">Tom</option>
              </select>

          </td>
        </tr>
        <tr>
          <th> Projects </th>
          <td>

              <select id="dd2">
                    <option value="1">pp1</option>
                    <option value="2">pp2</option>
              </select>

          </td>

我有以下代码

$(function () {
    var ddVal = '';
    var dropdown = document.getElementById("dd1")
    $(dropdown).focus(function () {
        ddVal = $(this).val();
        }).blur(function () {
        if (ddVal == $(this).val()) {
            $(this).change();
        }
    }).change (function () {

});

对于 dd1 的更改事件。但我不知道如何从 jQuery 调用 java 方法。

在我的应用程序中，我有一个 java 类，其中有一个返回列表的方法，我需要将其加载到 dd2 下拉列表中。

谁能帮我解决这个问题？

4

1 回答 1

1

你应该用 AJAX 做这样的事情。

JavaScript 发送请求，您的控制器利用 Java 部分执行所需的操作，然后传回 JSON 响应，您的 JavaScript 根据该响应操作页面。

编辑：

例如，脚本可以发出以下请求：

$.ajax({
    "type": "POST",
    "url": "/ajaxAPI/updatedropdown/",
    "data": {
        "selected": selectedMenuItemId
    },
    "success": function (data) {
        var menuItems = data.menuItems;
        dropDownToChange.updateChoices(menuItems);
    }
});

此类请求的控制器可能如下所示：

public class DropDownListController implements Controller {

    @Override
    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        MenuItem selected = extractSelectionFromRequest(request);
        List<MenuItem> choices = dropDownListService.getMenuFor(selected);
        ModelAndView mav = new ModelAndView("dropDownListAjax.jsp");
        mav.addObject("menu", choices);
    }

    // WARNING! Some error checks are missing!
    private MenuItem extractSelectionFromRequeset(HttpServletRequest request) {
        validateRequest(request);
        return dropDownListService.getMenuItemById(request.getAttribute("selected"));
    }

    // ...

}

对于视图，您可以有类似的东西：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
{
    "menuItems": [
        <c:forEach items="${menu}" var="menuItem">
            {
                "url": <c:out value="${menuItem['url']}"/>,
                "caption": <c:out value="${menuItem['caption']}"/>
            },
        </c:forEach>        
    ]
}

然后，客户端 JavaScript 将收到如下响应：

{
    "menuItems": [
        {
            "url": "http://www.example.com/"
            "caption": "Home"
        },
        {
            "url": "http://www.example.com/news/list/"
            "caption": "News"
        },
        {
            "url": "http://www.example.com/forum/topics/"
            "caption": "Forum"
        },
    ]
}

请注意，上面的示例可能不是 100% 正确，因为自从我上次使用 JSP 以来已经有一段时间了（无论如何我对 FreeMarker 更满意）。

基本上，您调用 Web 基础架构的一部分，而不是使用 HTML 代码响应，而是根据请求操作的结果传回 JavaScript 对象。

由于 jQuery 在客户端，而 JSP 在服务器端，因此您没有直接调用远程方法的选项。在 Web 世界中执行此操作的标准方法是 AJAX。

于 2013-05-11T10:08:08.893 回答