Java 无法使用Jquery、Ajax和Json向Spring控制器发送POST请求_Java_Jquery_Ajax_Json_Spring Mvc

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

java jquery ajax json spring-mvc

Java 无法使用Jquery、Ajax和Json向Spring控制器发送POST请求,java,jquery,ajax,json,spring-mvc,Java,Jquery,Ajax,Json,Spring Mvc,我正在尝试使用Spring、jQuery、Ajax和Json创建一个非常简单的流程。但我无法向Spring控制器发送POST请求。当我试图在@RequestMapping中使用consumes和Products时，我的eclipse也显示了编译错误。我没有使用maven。它是eclipse中一个简单的动态web项目。我使用的是Spring3.0.5罐 HTML页面 <html> <head> <style> div {

我正在尝试使用Spring、jQuery、Ajax和Json创建一个非常简单的流程。但我无法向Spring控制器发送POST请求。当我试图在@RequestMapping中使用consumes和Products时，我的eclipse也显示了编译错误。我没有使用maven。它是eclipse中一个简单的动态web项目。我使用的是Spring3.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>

我收到以下编译错误：

注释类型RequestMapping的属性consumes未定义

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>

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>


div{
边框：1px实心#000000；
}
var user=“”；
var pwd1=“”；
var json=“”；
var strJson=“”；
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
控制台日志（“内部点击”）；
user=$（“#用户名”）.val（）；
pwd1=$（“#密码”）.val（）；
json={用户名：用户，密码：pwd1}；
log（“json:+json”）；
strJson=JSON.stringify（JSON）；
日志（“strJson:+strJson”）；
$.ajax({
类型：“POST”，
url:“http://localhost:8080/JSONProject/add.html",
contentType:'应用程序/json'，
数据：JSON.stringify（JSON）
})
.done（函数（resultUserTo）{
stringify（resultUserTo）
警报（“结果：+ResultUserTo”）；
});
});
});
请输入您的文本：


用户名


密码

注：我使用了3.2.0版本

Spring3.1引入了

生产

和

消费

属性。见：

您使用的是Spring3.0.x，因此您的程序不会编译，因此不会执行任何操作

此外，按照配置，您的

add

方法的返回值将用作视图名称（名为“Handled application/json request”的视图）。如果您想自己处理内容生成，请使用

@ResponseBody

注释您的

add

方法

此外，您的js处理程序调用了错误的url：

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

将js/ajax url更改为

http://localhost:8080/JSONProject/add

或您的请求映射到

@RequestMapping（value=“/add.html”，method=RequestMethod.POST，consumes=“application/json”）

以下是我的观察结果，如果有帮助，请告诉我：

1。内部资源视图解析器

您的内部资源视图解析器在jsp文件夹中查找后缀为.htm的文件。因此，除index.jsp外，所有文件都应以.htm结尾。或者，如果它们是.html，您可以将视图解析器改为查找.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。输入类型按钮未提交

将输入类型更改为just Button而不是Submit。单击此输入[type=“Submit”]时，倾向于将表单提交给表单的操作（未指定该操作，因此会重新加载页面，这就是您获得相同系统的原因）。您想用onclick事件覆盖此输入。因此，将其类型更改为button

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

3。消费和生产

不需要。这些基本上是对处理程序的限制。

这给我带来了麻烦。没有他们也行。这完全是您的要求。

我不记得这方面有多少内容，但默认情况下标记是GET，我看到您使用的是按钮处理程序，但这可能是离合器吗？第二件事可能是，您将请求发送到JSONProject/add.html，但映射仅为/add。如果出现编译错误，您认为您的程序可以做什么？我认为问题在于，您将ajax调用发送到“/JSONProject/add.html”，但控制器中的映射是“/add”。我假设您的WAR上下文是“JSONProject”，所以第一部分很好，但除非您在配置中执行我没有看到的操作，否则SpringMVC不会在其映射上使用

.html

扩展。我怀疑如果您使用Chromes dev tools或FireFox的FireBug之类的工具，并查看AJAX调用得到的响应，您将得到一个404 Not Found。@Lukino我在表单标记中添加了POST方法。还是不行。关于发送JSONProject/add.html和mapping only/add，它在index.jsp上运行良好。我仍然在controller中将映射更改为/add.html。无益。正在调用我的GET处理程序。@CodeChimp如果您看到index.jsp，我将在``中使用hello.html，它会向控制器发出完美的GET请求并呈现hello.html。此外，还会打印GET处理程序中的syso。使用/JSONProject/add.html调用我的GET处理程序是因为我可以看到这个方法中的syso在eclipse控制台上打印出来。我添加了“@ResponseBody”，解决了我的编译问题。仍未调用POST处理程序。：（我将把更新后的代码放在EDITI中，我将映射更改为handle/add.html。仍然是相同的问题。我打开了chrome控制台查看原因，我可以看到OST 404（未找到）问题解决后，我关闭了这个线程。我没有给出绝对路径，而是在ajax调用中使用add.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>

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

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

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

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