0

Web jsp Web アプリケーションがあります。1 つのページに 2 つのドロップダウンリストが必要です。dd1 から値を選択すると、この値に従って 2 番目のドロップダウンが入力されます。javascriptまたはjQueryのドロップダウン1変更イベントからJava関数を呼び出すにはどうすればよいですか?

例を取得しましたが、それはjspページを呼び出していますが、Javaメソッドを使用して、dropdown1から取得したパラメーターを送信する必要があります

これは私のドロップダウン dd1 です。したがって、トムを選択すると、dd2 のトムの関連情報が必要になります。

            <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 メソッドを呼び出す方法がわかりません。

私のアプリケーションには、dd2 ドロップダウンにロードする必要があるリストを返すメソッドがある Java クラスがあります。

この問題に関して誰でも私を助けることができますか?

4

1 に答える 1

1

そのようなことは AJAX で行う必要があります。

JavaScript がリクエストを送信すると、コントローラーは Java 部分を利用して必要なことを実行し、JavaScript がページを操作するのに基づいて JSON レスポンスを返します。

編集：

たとえば、スクリプトは次のリクエストを発行できます。

$.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 の方が快適です)。

基本的に、HTML コードで応答するのではなく、要求された操作の結果に基づいて JavaScript オブジェクトを返す Web インフラストラクチャの一部を呼び出します。

jQuery はクライアント側にあり、JSP はサーバー側にあるため、リモート メソッドを直接呼び出すオプションはありません。Web の世界でこれを行う標準的な方法は AJAX です。

于 2013-05-11T10:08:08.893 に答える