Question

我正在尝试使用spring boot和ajax使用简单的Web应用程序。我的想法是当我提交Http POST表单数据时，我想通过AJAX调用调用控制器并在同一网页上显示结果。

当我运行sprint启动应用程序时，它会在http://localhost:8080/上选择正确的页面index.html。

目前我可以进行ajax调用，但问题是页面转发到http://localhost:8080/test显示

＆＃34;来自Spring Boot的问候！ @ myemail＆＃34;

，但我希望它显示这个并保持在同一页面，只有从控制器返回的数据。

我肯定错过了一些根本错误的事情。以下是我的代码片段。

的index.html：

<form id="signup-form" method=post action="/test">
<input type="email" name="email" id="email" placeholder="Email Address"/><input type="submit" value="Sign Up" />
</form>

Ajax电话：

$form.addEventListener('submit', function(event) {

                    var data = 'dmc='+ encodeURIComponent(dmc.value);
                        $.ajax({
                            url:"test",
                            data : data,
                            type : "POST",

                            success : function(response) {
                                alert( response );
                                $message._show('success', response);
                            },
                            error : function(xhr, status, error) {
                                alert(xhr.responseText);
                        },
                            complete: function() {
                                window.location = 'index.html';
                              }

                        });
                        return false;

                });

休息控制器：

@RequestMapping(value="/test",method=RequestMethod.POST)
    public String index(@RequestParam(value="email", required=false) String email) {
        return "Greetings from Spring Boot! "+email+";
    }

Answer 1

查看现有问题：

How to prevent buttons from submitting forms

尝试删除＆＃39;输入=＆＃34;提交＆＃34;＆＃39;您的按钮属性，并为您的按钮提供ID。

<input id="buttonId" value="Sign Up" />

然后，使用$（＆＃39; buttonId＆＃39;）on（＆＃39;点击＆＃39;，function（）），其中＆＃39; buttonId＆＃39;是您分配给该按钮的新ID：

$('buttonId').on('click', function() {

                var data = 'dmc='+ encodeURIComponent(dmc.value);
                    $.ajax({
                        url:"test",
                        data : data,
                        type : "POST",

                        success : function(response) {
                            alert( response );
                            $message._show('success', response);
                        },
                        error : function(xhr, status, error) {
                            alert(xhr.responseText);
                    },
                        complete: function() {
                            window.location = 'index.html';
                          }

                    });
            });

你不应该在你的js函数中返回false。你的控制器看起来很好。

Answer 2

我会使用ResponseBody：

@RequestMapping(value="/test",method=RequestMethod.POST)
public @ResponseBody String index(@RequestParam(value="email", required=false) String email)

然后：

success : function(response) {
    $message._show('success', response);
 },

spring mvc显示AJAX调用返回同一网页上的数据，而不是单独的网页

2 个答案: