如何在 Spring MVC JSP 视图中实现 Ajax 调用答案

【问题标题】：How to implement Ajax calls in a Spring MVC JSP view如何在 Spring MVC JSP 视图中实现 Ajax 调用
【发布时间】：2017-11-22 11:53:54
【问题描述】：

我正在使用 Maven、Spring 和 MySQL 做一个 java MVC 项目。

事实上，当我在“选择”表单上选择一个值以及在日历上选择一个日期时，我想显示一条短信。

我的jsp视图中有以下代码（这只是问题的核心）

        <div class="well lead">Formulario De Registro De Tarea</div>
    <form:form method="POST" modelAttribute="task" class="form-horizontal">
        <form:input type="hidden" path="id" id="id"/>

        <div class="row">
            <div class="form-group col-md-12">
                <label class="col-md-3 control-lable" for="type">Tipo de tarea</label>
                <div class="col-md-7">
                    <select id="type" name="type">
                        <c:forEach var="item" items="${typesList}">
                            <option value="${item.type}">${item.type}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="form-group col-md-12">
                <label class="col-md-3 control-lable" for="date">Fecha</label>
                <div class="col-md-7">
                    <form:input type="text" path="date" id="datepicker" style="width:100px" class="form-control input-sm"/> 
                    <div class="has-error">
                        <c:if test="${fechaFestivo != null}">
                            <p> ${fechaFestivo}</p>
                        </c:if>
                        <form:errors path="date" class="help-inline"/>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-group col-md-12">
                <label class="col-md-3 control-lable" for="duration">Duración (horas)</label>
                <div class="col-md-7">
                    <form:input type="text" path="duration" id="duration" style="width:60px" class="form-control input-sm" />
                    <div class="has-error">
                        <c:if test="${duracionMaxima != null}">
                            <p> ${duracionMaxima}</p>
                        </c:if>
                        <form:errors path="duration" class="help-inline"/>
                    </div>
                </div>
            </div>
        </div>

看起来像这样：

我想做的是，当我从 “Tipo de tarea” 选项中选择一个选项时，在选项下方显示一条文字：“所有任务的平均持续时间那种类型是……（和平均数）”.

另外，当我从日历中选择一个日期时，会在 "Duracion" 字段下显示一个文本，上面写着：“您实际上有 X 小时（持续时间总和）用于 THIS（选择的) 日期".

编辑更多信息

TaskController：创建任务jsp的获取和发布

/**
 * This method will provide the medium to add a new task.
 */
@RequestMapping(value = { "/newtask" }, method = RequestMethod.GET)
public String newTask(ModelMap model) {
    Task task = new Task();
    typesService.loadTypes();

    Collection<Types> typesList = typesService.findAllTypes();
    model.addAttribute("task", task);
    model.addAttribute("typesList", typesList);
    model.addAttribute("edit", false);
    model.addAttribute("loggedinuser", getPrincipal());
    return "task/register";
}

/**
 * This method will be called on form submission, handling POST request for
 * saving task in database. It also validates the task input
 */
@RequestMapping(value = { "/newtask" }, method = RequestMethod.POST)
public String saveTask(@Valid Task task, BindingResult result,
        ModelMap model) {

    Collection<Task> dayTasks = taskService.findTasksDateUserType(task.getDate(), task.getDate(), getPrincipalUser().getId(), null);
    Double tasksDuration = taskService.getTasksDuration(dayTasks);

    if(task.getDuration()+tasksDuration>12.0) {
        ObjectError error = new ObjectError("duracionMaxima", "No se pueden incurrir más de 12 horas un mismo día");
        result.addError(error);
    }

    if(festivoService.isFestivo(task.getDate())) {
        ObjectError error = new ObjectError("fechaFestivo", "La fecha de la tarea es un día festivo");
        result.addError(error);
    }

    if (result.hasErrors()) {
        Collection<Types> typesList = typesService.findAllTypes();
        //List<TaskType> typesList = new ArrayList<TaskType>(Arrays.asList(TaskType.values()));
        model.addAttribute("typesList", typesList);
        model.addAttribute("loggedinuser", getPrincipal());
        for(ObjectError o: result.getAllErrors()) {
            System.out.println(o.getObjectName());
            if(o.getObjectName().equals("fechaFestivo")) {
                model.addAttribute("fechaFestivo", "La fecha de la tarea es un día festivo");
            }
            if(o.getObjectName().equals("duracionMaxima")) {
                model.addAttribute("duracionMaxima", "No se pueden incurrir más de 12 horas un mismo día");
            }
        }
        return "task/register";
    }

    if(task.getDate().after(new Date())){
        FieldError dateError =new FieldError("task","date",messageSource.getMessage("date.before", new String[]{}, Locale.getDefault()));
        result.addError(dateError);

        Collection<Types> typesList = typesService.findAllTypes();
        model.addAttribute("typesList", typesList);
        model.addAttribute("loggedinuser", getPrincipal());
        return "task/register";
    }

    User user = getPrincipalUser();
    taskService.save(task,user);

    model.addAttribute("success", user.getName() + " ha registrado la tarea"+ task.getId() + " correctamente");
    model.addAttribute("loggedinuser", getPrincipal());
    //return "success";
    return "task/registerSuccess";
}

AJAX 请求映射： 我刚刚为 AJAX 调用做了这些方法

    @RequestMapping(value= {"/ajax/type-{id}"})
public Double ajaxType(@PathVariable Integer typeId) {
    return typesService.getAvgDailyEffort(typeId);
}

@RequestMapping(value= {"/ajax/date-{date}"})
public Double ajaxDate(@PathVariable String date) {
    Double result = 0.;
    DateFormat formatter = new SimpleDateFormat("dd/MM/yyyy");
    try {
        Date dateF = formatter.parse(date);
        Collection<Task> tasks = taskService.findTasksDateUserType(dateF, dateF, getPrincipalUser().getId(), null);
        result = taskService.getTasksDuration(tasks);
    } catch (ParseException e) {
        e.printStackTrace();
    }
    return result;
}

我也将它添加到我的 jsp 视图中

        <div class="row">
            <div class="form-group col-md-12">
                <label class="col-md-3 control-lable"></label>
                <div class="col-md-7">
                    <p id="avg"> Media de horas del tipo de tarea</p>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="form-group col-md-12">
            <label class="col-md-3 control-lable"></label>
                <div class="col-md-7">
                    <p id="durationday">Horas incurridas en la fecha</p>
                </div>
            </div>
        </div>

现在我的 JSP 视图如下所示：

在阅读 jQuery 之后我想做的是从 "type" (Tipo de tarea) 和 "date" (Fecha) 中获取值更改，计算我之前描述的内容并将相应的文本替换为计算结果。

再次编辑 刚刚将此代码添加到我的 jsp 头（jquery 脚本）

    $(document).ready(function(){
    $("#type").change(function(){
        $('#avg').load('/ajax-type', 
                "type="+$('#type').find('option').val())
    });
    $("#datepicker").change(function(){
        $('#durationday').load('/ajax-date', 
                "date="+$('#datepicker').val())
    });
});

并将我的控制器方法更改为：

    @RequestMapping(value= {"/ajax-type"})
public @ResponseBody String ajaxType(@RequestParam("type") String type) {
    Collection<Types> types = typesService.findAllTypes();
    int typeId = 0;
    for(Types t: types) {
        if(t.getType().equals(type)) {
            typeId = t.getId();
        }
    }
    double avgDailyEffort = typesService.getAvgDailyEffort(typeId);
    return "Media de horas del tipo de tarea: " + avgDailyEffort;
}

@RequestMapping(value= {"/ajax-date"})
public @ResponseBody String ajaxDate(@RequestParam("date") String date) {
    Double tasksDuration = 0.;
    DateFormat formatter = new SimpleDateFormat("dd/MM/yyyy");
    try {
        Date dateF = formatter.parse(date);
        Collection<Task> tasks = taskService.findTasksDateUserType(dateF, dateF, getPrincipalUser().getId(), null);
        tasksDuration = taskService.getTasksDuration(tasks);
    } catch (ParseException e) {
        e.printStackTrace();
    }
    return "Horas incurridas en la fecha: " + tasksDuration;
}

但是当我对两个字段进行更改时，我得到了 GET 404（未找到）。

【问题讨论】：

标签： spring jsp model-view-controller

【解决方案1】：

您将需要使用客户端技术，例如 javascript。一个名为 JQuery 的优秀 javascript 库具有用于进行 ajax 调用的良好预构建函数，但您需要进行一些研究并尝试一下。如果您遇到困难，我认为您需要提出与 javascript 相关的特定问题（如果您决定使用 JQuery）。以下可能会有所帮助： Getting started with JQuery 和 JQuery ajax api

使用额外信息，首先将@RequestMapping(value= {"/ajax/type-{id}"}) 更改为@RequestMapping(value= {"/ajax/type/{id}"}) 这将允许您使用路径变量（对日期执行相同操作）。您还需要在请求映射之后和方法声明之前直接添加 @ResponseBody，以便 spring 知道返回值。

【讨论】：

好吧，在阅读了您在答案中提供的所有信息之后，我想我知道我想要什么，但我无法自己完成（或遵循教程，因为所有其中专注于使用 PHP 列出、删除或修改对象）。我只想使用插入 MySQL DB 的值进行查询，并使用 jQuery 在输入下方打印结果。
您需要在控制器中设置一些特定的映射，以便 ajax 调用返回所需的值/对象。 @RequestMapping("ajax") 等如果您可以发布您当前的控制器，那么查看您的服务器端代码可能会有所帮助。
刚刚编辑了我的问题，添加了更多代码和关于我正在尝试做的事情的解释，现在有了关于 jQuery 的新知识，它可能看起来更容易理解
再次编辑，我刚刚使用新提示进行了一些更改
我现在正在考虑，也许日期上的西班牙口音和 de '/' 会造成冲突？