Question

我的JSP页面有一个按钮“Load”和两个文本字段 - “Weather”和“Companions”。单击按钮时，它应调用控制器，控制器必须将在textfields中键入的值加载到同一JSP页面的表中。我怎样才能做到这一点？当我点击“加载”时，没有任何反应。

JSP页面

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
    <title>Test 1</title>
</head>
<body>
<h2>Context information</h2>
   <table>
    <tr>
        <td><form:label path="weather">Weather</form:label></td>
        <td><form:input path="weather" /></td>
    </tr>
    <tr>
        <td><form:label path="companions">Companions</form:label></td>
        <td><form:input path="companions" /></td>
    </tr>
</table>  
                <table border="1" cellspacing="1" align="center"
                    style="margin-top: 160px;">
                    <tr>
                        <th>Weather</th>
                        <th>Companions</th>
                    </tr>
                    <tr>
                        <td>${weather}</td>
                        <td>${companions}</td>
                    </tr>
                </table>
<button onclick="window.location.href=window.location.href;">Load</button>
</body>
</html>

控制器

package com.test1.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class Test1 {

    @RequestMapping(value = "/context", method = RequestMethod.GET)
    public ModelAndView context() {
        return new ModelAndView("context", "command", new Context());
    }

    @RequestMapping(value = "/context", method = RequestMethod.POST) 
    public String loadData(@ModelAttribute("SpringWeb")Context context, ModelMap model) {
      model.addAttribute("weather", context.getWeather());
      model.addAttribute("companions", context.getCompanions());
      return "result";
    }

}

Answer 1

首先编写的代码中存在很多问题

为@RequestMapping提供的值是重复的，请提供其他内容，例如

@RequestMapping(value = "/loadData", method = RequestMethod.POST) 
    public String loadData(@ModelAttribute("SpringWeb")Context context, ModelMap model) {
      model.addAttribute("weather", context.getWeather());
      model.addAttribute("companions", context.getCompanions());
      return "result";
    }

然后表格标签丢失像<form:form method="POST" action="loadData">之类的东西必须在那里

然后用提交按钮替换按钮

因此，您的jsp页面将如下所示，根据您的应用程序更改操作

<form:form method="POST" action="loadData">
 <table>
    <tr>
        <td><form:label path="weather">Weather</form:label></td>
        <td><form:input path="weather" /></td>
    </tr>
    <tr>
        <td><form:label path="companions">Companions</form:label></td>
        <td><form:input path="companions" /></td>
    </tr>
</table>  
                <table border="1" cellspacing="1" align="center"
                    style="margin-top: 160px;">
                    <tr>
                        <th>Weather</th>
                        <th>Companions</th>
                    </tr>
                    <tr>
                        <td>${weather}</td>
                        <td>${companions}</td>
                    </tr>
                </table>

<input type="submit" value="Submit"/>

</form:form>

Answer 2

@RequestMapping(value = "/loadData", method = RequestMethod.GET) 
public @ResponseBody String loadData(@ModelAttribute("SpringWeb")Context context, ModelMap model) {
/** here i am assuming context.getWeather() and context.getCompanions() returns string or at least values you can convert to string using toString() method. If you need to convert them to string then you will need to change the code to context.getWeather().toString() + context.getCompanions().toString() **/

  return context.getWeather() + context.getCompanions();
}

<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function loadAjaxString() {
    $.ajax({
        url : '/loadData.html',
        success : function(data) {
             var weather = data.substring(0, endOfIndexofWeather);
             var companion = data.substring(endOfIndexofWeather);
            $('#tdWeather').val(weather );
            $('#tdcompanions').val(companion);
        }
    });
}
</script>

如何在按钮单击事件上将值加载到同一JSP页面中

2 个答案: