java - 从 javascript 调用 java 方法

Question

我有一个 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 下拉列表中加载的列表。

有人可以帮我解决这个问题吗？

Answer 1

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

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

<小时/> 编辑:

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

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

此类请求的 Controller 可能如下所示:

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"));
    }

    // ...

}

对于 View ，你可以有类似的东西:

<%@ 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。