从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发送请求，您的控制器利用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" }, ] } 

请注意，由于自上次使用JSP以来已经有一段时间了，因此上面的示例可能不是100％正确的（无论如何我对FreeMarker还是比较满意的）。

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

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