Question

我正在尝试使用Ajax调用我的Spring控制器并提交表单。

函数始终检索错误窗口。我尝试将网址参数更改为“/个人资料”，“个人资料”或“PrivateAreaController /个人资料”，但我一直收到同样的错误

我的main.js文件和控制器按以下顺序放置：

-->Mainfolder
    -->src
       -->java
          -->controller
              -->PrivateAreaController.java
       -->resources
           -->static
              -->js
                 -->main.js

我的控制器名为PrivateAreaController

Ajax代码

$('#sampleForm').submit(
    function(event) {
        var firstname = $('#firstname').val();
        var lastname = $('#lastname').val();
        var data = 'firstname='
            + encodeURIComponent(firstname)
            + '&amp;lastname='
            + encodeURIComponent(lastname);
        $.ajax({
            type : "POST",
            dataType: "json",
            url : '@Url.Action("callingcontroller","PrivateAreaController")',
            contentType: "application/json; charset=utf-8",
            data : data,
            success : function(response) {
                alert( response );
            },
            error : function() {
                alert("not working");
            }
        });
        return false;
    });

春季代码

@RequestMapping(value = "/profile", method = RequestMethod.POST)
        public @ResponseBody
        String processAJAXRequest(
                @RequestParam("firstname") String firstname,
                @RequestParam("lastname") String lastname   ) {
            String response = "";

            System.out.println("working");
            return response;
        }

HTML表单

<form id="sampleForm" method="post" action="/profile">
         <input type="text" name="firstname" id="firstname"/>
         <input type="text" name="lastname" id="lastname"/>
         <button type="submit" name="submit">Submit</button>
</form>

编辑：

我找到了答案..我需要添加

@CrossOrigin(origins = "http://localhost:8080")

在@RequesMapping参数之前，并将ajax调用的url参数更改为url：'http://localhost:8080/(your requestmapping参数）

Answer 1

我找到了答案。我需要添加

@CrossOrigin（origins =“ http://localhost:8080”）

在@RequesMapping参数之前，并将ajax调用的url参数更改为url：'http://localhost:8080/(your requestmapping参数）

Answer 2

这对我来说是将springboot与thymeleaf结合使用的，对这篇文章How do you get the contextPath from JavaScript, the right way?

的答案之一做了很小的修改

在HTML

中

        <html>
            <head>
                <link id="contextPathHolder" th:data-contextPath="@{/}"/>
            <body>
                <script src="main.js" type="text/javascript"></script>
            </body>
        </html>

在JS中学习

  var CONTEXT_PATH = $('#contextPathHolder').attr('data-contextPath');
  $.get(CONTEXT_PATH + 'action_url', function() {});

Answer 3

您收到的错误是什么，按F12并转到网络标签，然后按下提交按钮，现在看到网址，尝试添加网址：＆＃34; ../您的服务网址..

Answer 4

好。我以前从未见过这部分。

@Url.Action("callingcontroller","PrivateAreaController")

我通常喜欢如下：

 $.ajax({
        type : "POST",
        dataType: "json",
        url : '/profile',
        contentType: "application/json; charset=utf-8",
        data : data,
        success : function(response) {
            alert( response );
        },
        error : function() {
            alert("not working");
        }
 });

但它可能与contextPath有问题。所以，我所做的是添加＆＃39; request.getContextPath（）/＆＃39;如下：

     $.ajax({
        type : "POST",
        dataType: "json",
        url : '${request.getContextPath()}/profile',
        contentType: "application/json; charset=utf-8",
        data : data,
        success : function(response) {
            alert( response );
        },
        error : function() {
            alert("not working");
        }
    });

contextPath具有起始页面的URL。例如，www.google.com＆＃39;或者＆＃39; www.naver.com＆＃39;

但总的来说，由于我个人经常使用contextPath，所以我会创建一个值并保留它。

var context = ${request.getContextPath()};

然后，您的代码看起来整洁，易于重用。

你也可以用错误属性弄明白。

        error : function(err) {
            console.log("not working. ERROR: "+JSON.stringify(err));
        }

我希望这会成功。

Ajax请求不是调用Spring启动控制器

4 个答案: