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 请求和响应的最佳组合之一。你需要这个 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

一旦您使用提到的@Responsebody 注释 NimChimpsky，xmlhttpReq.responseText 的值将是 JSON 编码的字符串。看看这篇解释如何解析 JSON 字符串的帖子： Parse JSON in JavaScript?

于 2013-05-14T13:00:40.000 回答