2

ここに画像の説明を入力 私のコントローラー:

@RequestMapping(value = "jobs")
public void removeJobs(@RequestParam("username") String username, Model model) {
   String []jobs = jobsFetcher(username);
   model.addAttribute("list", jobs); 
}

私のJSP：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Insert title here</title>
   <link type="text/css" rel="stylesheet"
href="<c:url value="public/files/styles/jobManager.css" />" />

<script type="text/javascript">
function ajaxFunction(username) {
    var xmlhttpReq = crossBrowserAjaxObject();
    if (xmlhttpReq) {
        xmlhttpReq.open("get", "jobs", true);
        xmlhttpReq.onreadystatechange = handleServerResponse(xmlhttpReq);
        xmlhttpReq.setRequestHeader('Content-Type',
                'application/x-www-form-urlencoded');
        xmlhttpReq.send("username=" + username);
    }
}

function crossBrowserAjaxObject() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}

function handleServerResponse(xmlhttpReq) {
    //var xmlhttp = new XMLHttpRequest();
    return function() {
        alert(xmlhttpReq.readyState);
        if (xmlhttpReq.readyState == 4 && xmlhttpReq.status == 200) {
            alert(xmlhttpReq.responseText); // this is ok
            // HERE HOW DO I GET THE MODEL OBJECT AS A RESPONSE COMMING FROM SERVLET &
            // USE IN MY JSP FILE ?
        }
    };
}
</script>
</head>
<body>
<div>
    <div class="leftDiv">
        <a href="#" onclick="ajaxFunction('JAMES')">JAMES</a> 
        <a href="#" onclick="ajaxFunction('David')">David</a> 
        <a href="#" onclick="ajaxFunction('Catrina')">Catrina</a> 
        <a href="#" onclick="ajaxFunction('Cathy')">Cathy</a> 
        <a href="#" onclick="ajaxFunction('Paul')">Paul</a>
    </div>

    <div class="rightDiv">
        <!-- HOW DO I GET THE JOB LIST & USE IT HERE USING MY AJAX ? -->
        <c:forEach items="???" var="task">
            <p>${task}</p>
        </c:forEach>
    </div>
</div>
</body>
</html>

写真の中で述べたように、ページ全体を更新せずに従業員をクリックすると、右の div 要素が変更されます。

私が知らない唯一のことは、xmlhttpReq.responseTextが私に戻ってきたとき、Ajaxを使用してジョブの配列を運ぶモデル要素を取得し、それを使用してページをレンダリングする方法です...

言い換えれば、Ajax 呼び出し後にコントローラーからパラメーターを取得し、Ajax 自体を使用してページを作成するにはどうすればよいでしょうか?

これを乗り越えるのに役立つアイデアや提案、または何かありますか?

(ちなみに、これらのコードはまだテストされていません!)

4

3 に答える 3

4

Spring MVC 3 と JQuery は、ajax リクエストとレスポンスを実行するための優れた組み合わせの 1 つです。この jar "jackson-mapper-asl" が必要です。Ajax 要求を処理し、json 応答を返す removeJobs コントローラーを定義します。@ResponseBody は、カスタム オブジェクトを同等の json 応答オブジェクトに変換します。

function madeAjaxCall(){ $.ajax({ type: "post", url: "jobs", cache: false,  data:{key:value;key:value}, success: function(response){ //user your data for view }, error: function(){    alert('Error while request..'); } }); } -
于 2013-08-13T14:53:46.317 に答える
3

jquery を見てみましょう。これにより、ajax リクエストがかなり単純になります。

@responsebodyコントローラーメソッドを変更して、戻り値の型に注釈を含める必要があります。ajax リクエストのモデルに何かを追加しないでください。新しい ModelAndView を返さない限り機能しません。

ここにイントロがあります

于 2013-05-14T12:16:17.890 に答える
1

NimChimpsky が言及した @Responsebody アノテーションを使用すると、xmlhttpReq.responseText の値は JSON でエンコードされた文字列になります。JSON 文字列を解析する方法を説明するこの投稿を見てください: JavaScript で JSON を解析しますか?

于 2013-05-14T13:00:40.000 に答える