无法使用Jquery,Ajax和Json向Spring控制器发送POST请求

时间:2014-03-28 10:43:18

标签: java jquery ajax json spring-mvc

我正在尝试使用Spring,jQuery,Ajax和Json创建一个非常简单的流程。但是我无法向Spring控制器发送POST请求。此外,当我尝试使用消耗并在@RequestMapping中生成时,我的eclipse显示编译错误。我不是在使用maven。它是eclipse中一个简单的动态Web项目。我正在使用spring 3.0.5罐子。

HTML页面。

<html>
  <head>
  <style>
    div {
            border: 1px solid #000000;
        }
  </style>

    <script src="/JSONProject/js/jquery-1.11.0.min.js"></script>
    <script>
    var user="";
    var pwd1="";
    var json="";
    var strJson="";
        $(document).ready(function(){

            $("#button").click(function(){  
                console.log("inside click");
                user=$("#userName").val();
                pwd1=$("#password").val();
                json={username:user,password:pwd1};
                console.log("json: "+json);
                strJson=JSON.stringify(json);
                console.log("strJson: "+strJson);

                $.ajax({
                    type: "POST",
                    url: "http://localhost:8080/JSONProject/add.html",
                    contentType: 'application/json',
                    data: JSON.stringify(json)
                })
                .done(function(resultUserDTO) {
                    JSON.stringify(resultUserDTO)
                    alert("result: "+resultUserDTO);
                    });



            });
        });
    </script>
  </head>
  <body>
  <FORM>
            Please enter your text:
            <BR>
                <div  >
                    <label id="uName">Username</label>
                    <input id="userName"/>
                    <br>
                    <label id="pwd">Password</label>
                    <input id="password" type="Password" id="pwd"/>

                </div>
            <BR>
            <INPUT id="button" TYPE="SUBMIT" VALUE="Submit">
        </FORM>
  </body>
</html>

控制器:

package demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

import demo.model.Login;

@Controller

public class HelloWorldController {

    Login users;

    @RequestMapping("/hello")
    public ModelAndView helloWorld() {

        String message = "Hello World, Spring 3.0!";
        System.out.println("Inside controller");
        return new ModelAndView("hello", "message", message);
    }

    /**
     * Handles POST request
     */
    @RequestMapping(value = "/add",method = RequestMethod.POST ,consumes = "application/json")
    public String processJson(@RequestBody String requestBody){

        return "Handled application/json request "; 


    }
}

我收到以下编译错误:

注释类型RequestMapping

的属性使用未定义

的web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
    <display-name>Spring3MVC</display-name>


    <servlet>
        <servlet-name>spring</servlet-name>
        <servlet-class>
            org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>spring</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>
</web-app>

弹簧servlet.xml中

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd 
http://www.springframework.org/schema/context 
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc 
            http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

    <context:component-scan base-package="demo.controller" />
    <mvc:annotation-driven /> 

    <bean id="viewResolver"
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".htm" />
    </bean>

</beans>

的index.jsp

<html>
<head>
    <title>Spring with ajax</title>
</head>
<body>
    <a href="hello.html">Say Hello</a>
</body>
</html>

当我点击index.jsp中的hello.html链接时,hello.html打开,我得到处理“\ hello”和get的控制器方法的syso。但是当我使用jquery发出POST请求时,我仍然看到处理“\ hello”的方法的syso并在控制台上获取方法..

真的很困惑。 请帮忙 提前谢谢!!

提供建议后的新更新代码。代码已经遵守。但是没有调用POST处理程序。 POST处理程序中的Syso没有在eclipse控制台上打印。

控制器:

package demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import demo.model.Login;

@Controller

public class HelloWorldController {

    Login users;

    @RequestMapping("/hello")
    public ModelAndView helloWorld() {

        String message = "Hello World, Spring 3.0!";
        System.out.println("Inside controller");
        return new ModelAndView("hello", "message", message);
    }

    /**
     * Handles request for adding two numbers
     */
    @RequestMapping(value = "/add",method = RequestMethod.POST ,consumes = "application/json",produces = "application/json")
    public @ResponseBody String processJson(@RequestBody String requestBody){
        System.out.println("inside controller 2");

        return "Handled application/json request "; 


    }
}

hello.html的:

<html>
  <head>
  <style>
    div {
            border: 1px solid #000000;
        }
  </style>

    <script src="/JSONProject/js/jquery-1.11.0.min.js"></script>
    <script>
    var user="";
    var pwd1="";
    var json="";
    var strJson="";
        $(document).ready(function(){

            $("#button").click(function(){  
                console.log("inside click");
                user=$("#userName").val();
                pwd1=$("#password").val();
                json={username:user,password:pwd1};
                console.log("json: "+json);
                strJson=JSON.stringify(json);
                console.log("strJson: "+strJson);

                $.ajax({
                    type: "POST",
                    url: "http://localhost:8080/JSONProject/add.html",
                    contentType: 'application/json',
                    data: JSON.stringify(json)
                })
                .done(function(resultUserDTO) {
                    JSON.stringify(resultUserDTO)
                    alert("result: "+resultUserDTO);
                    });



            });
        });
    </script>
  </head>
  <body>
  <FORM method="post">
            Please enter your text:
            <BR>
                <div  >
                    <label id="uName">Username</label>
                    <input id="userName"/>
                    <br>
                    <label id="pwd">Password</label>
                    <input id="password" type="Password" id="pwd"/>

                </div>
            <BR>
            <INPUT id="button" TYPE="SUBMIT" VALUE="Submit">
        </FORM>
  </body>
</html>

P.S:我使用过3.2.0版本

2 个答案:

答案 0 :(得分:0)

春季3.1引入了producesconsumes属性。请参阅:http://docs.spring.io/spring/docs/3.2.x/spring-framework-reference/html/new-in-3.1.html

您正在使用spring 3.0.x,因此您的程序将无法编译,因此无法执行任何操作。

此外,根据配置,您的add方法的返回值将用作视图名称(名为“Handled application / json request”的视图)。如果您想自己处理内容生成,请使用add@ResponseBody方法添加注释。

你的js处理程序也在调用错误的url:

$.ajax({
    url: "http://localhost:8080/JSONProject/add.html"
});

VS

@RequestMapping(value = "/add",method = RequestMethod.POST ,consumes = "application/json")
public String processJson(@RequestBody String requestBody){

将js / ajax网址更改为http://localhost:8080/JSONProject/add或将您的请求更改为@RequestMapping(value = "/add.html",method = RequestMethod.POST ,consumes = "application/json")

答案 1 :(得分:0)

以下是我的观察,请告诉我它是否有帮助:

<强> 1。内部资源视图解析器

您的内部资源视图解析程序在jsp文件夹中查找带有后缀.htm的文件。因此,除index.jsp之外的所有文件都应以.htm结尾。或者如果它们是.html,您可以更改View Resolver以查找.html。

        <bean id="viewResolver"
            class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            <property name="prefix" value="/WEB-INF/jsp/" />
            <property name="suffix" value=".html" />
        </bean>

<强> 2。输入类型按钮未提交

将输入类型更改为仅按钮而不是提交。 单击此输入[type =“Submit”],往往将表单提交给表单的操作(未指定,因此重新加载页面,这就是为什么你得到相同的syso)。 您希望使用onclick事件覆盖此输入。因此将其类型更改为按钮。

   <INPUT id="button" TYPE="Button" VALUE="Submit">

第3。消费和生产

不是真的需要。 这些基本上是对处理程序的限制。 这给了我麻烦。它没有它们。完全是你对这个的呼吁。