Question

enter image description here 我的控制器：

@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＆amp; amp;来运行一系列作业的modelelement。用它来渲染页面......

换句话说，在Ajax调用之后，我将如何获取来自我的控制器的参数。使用Ajax本身制作我的页面？

您是否有任何想法或建议可以帮助我解决这个问题？

（顺便说一句，这些代码尚未经过测试！）

Answer 1

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..'); } }); } -

Answer 2

看一下jquery，它使ajax请求变得更加简单。

您需要更改控制器方法，以在返回类型中包含注释@responsebody。不要在模型中为ajax请求添加东西，除非你返回一个新的ModelAndView，否则它将无法工作。

here is an intro

Answer 3

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

AJAX从Spring-MVC Controller获取数据

3 个答案: