Question

我有一个web jsp Web应用程序。在一个页面中，我需要两个下拉列表。当我从dd1中选择一个值时，第二个下拉列表将根据此值填充。如何从javascript或jQuery中的dropdown 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发送请求，您的控制器利用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。

从javascript调用java方法

1 个答案: