Fatal编程技术网
  • jsp/
  • Jsp Ajax不向Spring控制器发送数据

Jsp Ajax不向Spring控制器发送数据

jsp spring-mvc

Jsp Ajax不向Spring控制器发送数据,jsp,spring-mvc,Jsp,Spring Mvc,我是阿贾克斯的新手，所以请容忍我。我有一个jsp页面，它应该以数组形式将选定的日期连同int-id和字符串类型一起发送给控制器。我用的是基思·伍德的日期选择器。但每当我试图发送数据时，它都会给我错误。控制台日志错误为： org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolverlogException WARNING: Handler execution resulte

我是阿贾克斯的新手，所以请容忍我。我有一个jsp页面，它应该以数组形式将选定的日期连同int-id和字符串类型一起发送给控制器。我用的是基思·伍德的日期选择器。但每当我试图发送数据时，它都会给我错误。控制台日志错误为：

        org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolverlogException
          WARNING: Handler execution resulted in exception: Required int parameter 'id' is not present
下面是我的jsp代码：

$(function() {
    $('#first').datepick({multiSelect: 99, showTrigger: '#calImg'});
           $("#getDates").click(function () {

             var dates = $('#first').datepick('getDate');

            //Create a HTML Table element.
             var table = $("<table />");

            //Add the data rows.
            for (var i = 0; i < dates.length; i++) {
                row = $(table[0].insertRow(-1));
                    var cell = $("<td />");
                    cell.html($.datepick.formatDate('DD, MM d,  yyyy',dates[i]));
                    row.append(cell);

            }

            var dvTable = $("#getSelect");
            dvTable.html("");
            dvTable.append(table);
        });
     $('#clearDates').click(function(){    

          $('#first').datepick('clear');
          $('#getSelect').empty();

          });


        $('#second').datepick({ 
            rangeSelect: true, monthsToShow: [1, 2]}); 
        var dateRange = [];
        $("#getRange").click(function () {

             var dates = $('#second').datepick('getDate');
            for(var i=0; i<dates.length; i++){
                dateRange.push(dates[i]);
            }
            //Create a HTML Table element.
            var table = $("<table />");

            //Add the data rows.
            for (var i = 0; i < dateRange.length-1; i++) {
                row = $(table[0].insertRow(-1));
                    var cell = $("<td />");
                    cell.html($.datepick.formatDate('DD, MM d,     yyyy',dateRange[i])+" <b> To </b>" + $.datepick.formatDate('DD, MM d,     yyyy',dateRange[i+1]) + "<br />");
                    i++;
                row.append(cell);

            }

            var dvTable = $("#getSelectRange");
            dvTable.html("");
            dvTable.append(table);
        });
     $('#clearRangeDates').click(function(){    

          $('#second').datepick('clear');
          $('#getSelectRange').empty();
          dateRange = [];
          });
     $('#start').datepick({showTrigger: '#calImg'});
     $('#end').datepick({showTrigger: '#calImg'});
     $('#submitDates').click(function(){
         var dateRandom = $('#first').datepick('getDate');
         var id = 1;
         var type = "random";
         $.ajax({
               url: "${pageContext.request.contextPath}/calendarData",
                dataType: "json",
                traditional: true,
                data: $.param({ "id": id, "dates": dateRandom, "type":     type}, true),
                type: "POST",
                contentType : 'application/json; charset=utf-8',
                success: function(data)     {$('#first').datepick({multiSelect: 99, showTrigger: '#calImg'});},
                error : function(e) {
                    alert('Error: ' + e);
                 }
            });
     });

});


</script>
</head>
<body>

<div class="container-fluid">
 <div class="page-header">
  <h2>Choose your dates:</h2>
 </div>     
  <div class="row">
   <h4>Choose By Day:</h4>
    <div class="col-sm-6" id="first" style="background-color:lavender;">

      <img id="calImg" src="${pageContext.request.contextPath}/resources    /script/calendar-    blue.gif" alt="Popup" class="trigger"> </p> 
    </div>
    <div class="col-sm-6" id="isoDate" style="background-    color:lavenderblush;">
    <div class="table-responsive">
     <table class="table">
      <tr><td colspan="2" class="c_button"><input type="button"     value="Get Date" id="getDates" /></td></tr>
      <tr><td colspan="2"><div id="getSelect"></div></td></tr>
       <tr><td class="c_button"><input type="button" value="Clear Date"     id="clearDates" /></td>
          <td class="c_button"><input type="button" value="Submit Date"     id="submitDates" /></td></tr>
      </table> 
      </div>
     </div>
  </div>

  <br /><br />
  <div class="row">
    <h4>Choose By Range:</h4>
    <div class="col-sm-6" id="second" style="background-color:lavender;">

    </div>
    <div class="col-sm-6" id="second_iso" style="background-    color:lavenderblush;">
    <div class="table-responsive">
     <table class="table">
      <tr><td colspan="2" class="c_button"><input type="button"     value="Get Date Range" id="getRange" /></td></tr>
      <tr><td colspan="2"><div id="getSelectRange"></div></td></tr>
      <tr><td class="c_button"><input type="button" value="Clear Date"     id="clearRangeDates" /></td>
          <td class="c_button"><input type="button" value="Submit Date     Range" id="submitRangeDates" /></td></tr>
      </table> 
      </div>
    </div>
  </div>
  <br /><br />
  <div class="row">
    <div class="col-sm-12" id="third_iso" style="background-    color:lavender;">
      <h4>Recurring Event:</h4>
      <form action="" method="post">
      <div class="table-responsive">
      <table id="recur" class="table">
        <tr>
          <td><b>Start Date: </b><input id="start" type="text"     name="start" class="form-control" /><span class="pop"><img id="calImg"     src="${pageContext.request.contextPath}/resources/script/calendar-blue.gif"     alt="Popup" class="trigger" /></span></td>
          <td><b>End Date: </b><input id="end" type="text" name="end"     class="form-control" /><span class="pop"><img id="calImg"     src="${pageContext.request.contextPath}/resources/script/calendar-blue.gif"     alt="Popup" class="trigger" /></span></td>
        </tr>
        <tr><td>
           <b>Repeat Event: </b>
           <select name="repeat" class="form-control">
             <option value="Daily">Daily</option>
             <option value="Weekly">Weekly</option>
             <option value="Monthly">Monthly</option>
           </select>
        </td></tr>
        <tr><td><input type="submit" value="Submit" class="btn     btn-primary btn-md"/></td></tr>
      </table>
      </div>
      </form>
    </div>
    <!--  <div class="col-sm-6" style="background-color:lavenderblush;">
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem     accusantium doloremque laudantium, totam rem aperiam, eaque     ipsa quae ab illo inventore veritatis et quasi architecto beatae     vitae dicta sunt explicabo.</p>
    </div>-->
  </div>
</div>


</body>
</html>   

$（函数（）{
$（'#first'）.datepick（{multiSelect:99，showTrigger:'#calImg'}）；
$（“#获取日期”）。单击（函数（）{
var dates=$（'#first'）。datepick（'getDate'）；
//创建一个HTML表元素。
变量表=$（“”）；
//添加数据行。
对于（变量i=0；i
我的控制器类是：

@Controller
public class ScheduleController {

    private DatesService datesService;

    public void setDatesService(DatesService datesService){
         this.datesService = datesService;
    }

    @RequestMapping("/")
    public String showHome(){
        return "home";
    }

    @RequestMapping("/calendar")
    public String showCalendar(){
        return "calendar";
    }

    @RequestMapping(value = "/calendarData", method = RequestMethod.POST,
            produces = MediaType.APPLICATION_JSON_VALUE, consumes =     MediaType.APPLICATION_JSON_VALUE)
    @ResponseStatus(value=HttpStatus.OK)
    @ResponseBody
    public String showCalendarData(@RequestParam("id") int id,         @RequestParam("dates[]") LocalDate[] dates, 
    @RequestParam("type") String type){

        for(int i=0; i < dates.length; i++){
            datesService.create_random(dates[i], type, id);
        }
        return "calendar";
    }

}

@控制器
公共类调度控制器{
私人日期服务日期服务；
公共无效设置日期服务（日期服务日期服务）{
this.datesService=datesService；
}
@请求映射（“/”）
公共字符串showHome（）{
返回“家”；
}
@请求映射（“/calendar”）
公共字符串showCalendar（）{
返回“日历”；
}
@RequestMapping（value=“/calendarData”，method=RequestMethod.POST，
products=MediaType.APPLICATION\u JSON\u VALUE，consumes=MediaType.APPLICATION\u JSON\u VALUE）
@ResponseStatus（值=HttpStatus.OK）
@应答器
公共字符串showCalendarData（@RequestParam（“id”）int-id，@RequestParam（“dates[]）LocalDate[]日期，
@RequestParam（“类型”）字符串类型）{
对于（int i=0；i
以下是pom.xml文件：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.neiu.scheduler</groupId>
  <artifactId>scheduler</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <build>
    <sourceDirectory>src</sourceDirectory>
    <plugins>
      <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <version>2.4</version>
        <configuration>
          <warSourceDirectory>WebContent</warSourceDirectory>
          <failOnMissingWebXml>false</failOnMissingWebXml>
        </configuration>
      </plugin>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.3</version>
        <configuration>
          <source>1.8</source>
          <target>1.8</target>
        </configuration>
      </plugin>
    </plugins>
  </build>
  <dependencies>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-core</artifactId>
        <version>4.2.2.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-beans</artifactId>
        <version>4.2.2.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>4.2.2.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-jdbc</artifactId>
        <version>4.2.2.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-web</artifactId>
        <version>4.2.2.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>4.2.2.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.38</version>
    </dependency>
    <dependency>
        <groupId>joda-time</groupId>
        <artifactId>joda-time</artifactId>
        <version>2.9.1</version>
    </dependency>
    <dependency>
        <groupId>org.codehaus.jackson</groupId>
        <artifactId>jackson-mapper-asl</artifactId>
        <version>1.9.13</version>
    </dependency>
    <dependency>
        <groupId>org.codehaus.jackson</groupId>
        <artifactId>jackson-core-asl</artifactId>
        <version>1.9.13</version>
    </dependency>
  </dependencies>
</project>


4.0.0
com.neiu.scheduler
调度程序
0.0.1-快照
战争
src
maven战争插件
2.4
网络内容
假的
maven编译器插件
3.3
1.8
1.8
org.springframework
弹簧芯
4.2.2.1发布
org.springframework
春豆
4.2.2.1发布
org.springframework
spring上下文
4.2.2.1发布
org.springframework
SpringJDBC
4.2.2.1发布
org.springframework
弹簧网
4.2.2.1发布
org.springframework
SpringWebMVC
4.2.2.1发布
javax.servlet
jstl
1.2
mysql
mysql连接器java
5.1.38
乔达时间
乔达时间
2.9.1
org.codehaus.jackson
杰克逊地图绘制者
1.9.13
org.codehaus.jackson
jackson core asl
1.9.13
您的ajax调用中的
id
参数正在HTTP POST正文中传递。但是您的控制器希望
id
参数作为请求参数出现在URL中，例如
http://localhost:8080/myApp?id=123

因此，错误消息是准确的，没有名为
id
的请求参数。而是在请求正文中传递
id

您可以通过GET请求将值作为URL的一部分传递（更新AJAX调用），也可以使用
@RequestBody
获取请求体并以另一种方式验证其内容（更新Java）

编辑： @用户5715620，您的类路径上是否有Jackson？如果使用Maven：

<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-mapper-asl</artifactId>
    <version>1.9.13</version>
</dependency>


org.codehaus.jackson
杰克逊地图绘制者
1.9.13
如果它包含在类路径中，Spring应该将其拾取，并使用它来序列化/反序列化请求/响应

编辑2:@user5715620，你整理好你的控制器方法了吗？在OP中你有
@ResponseBody
注释，这意味着该方法的返回值将作为响应体发送，你也有生成JSON的方法设置。但是你返回的是JSP的名称，即“calendar”。T字符串“calendar”不是有效的JSON

您将
showCalendarData
的参数更新为什么？可能会更新OP以反映您的当前状态。我希望它类似于
showCalendarData（@ResponseBody String jsonString）
。首先只需记录该字符串。一旦您知道您正在接收数据，您就可以使用Jackson解析jsonString并提取所需的值。（您可以将
jsonString
类型设置为自定义类型，并让Jackson序列化它，但在您的情况下，我将在以后添加该改进）

如何部署应用程序？确保所有依赖项都部署到容器中。如果使用Eclipse，可以在项目属性中检查部署程序集

试着了解您的预期情况，自己做一些调查。不要盲目地应用我的建议，然后再讨论下一个问题。

我将ajax代码更改为：

$(document).ready(function(){
     $('#submitDates').click(function(){
         var dateRandom = $('#first').datepick('getDate');
         var dates = JSON.stringify(dateRandom);
         // var id = 1;
        //var type = "random";
         alert("hi");
         $.ajax({
               url: "${pageContext.request.contextPath}/calendarData?id=1&type='random'",
               dataType: "json",                
                data : dates,
                type: "POST",
                contentType : 'application/json; charset=utf-8',
                success: function(response) {
                    alert("Success: " + response);
                    //$('#first').datepick({multiSelect: 99, showTrigger: '#calImg'});

                    },
                error : function(e) {
                    alert('Error: ' + 'Not working');
                 }
            });
         event.preventDefault();
     });
我的控制器是：

@RequestMapping(value = "/calendarData", method = RequestMethod.POST)

    @ResponseStatus(value=HttpStatus.OK)

    public @ResponseBody String showCalendarData(@RequestParam(value = "id") String id,
                                     @RequestBody(required = false) String[] dates, 
                                     @RequestParam(value = "type") String type){
......
}
@涡轮动车组没有work@turboemu获取错误警告：处理程序执行导致异常：Con