如何防止页面刷新？ AJAX、Spring MVC答案

【问题标题】：How to prevent page refreshing? AJAX, Spring MVC如何防止页面刷新？ AJAX、Spring MVC
【发布时间】：2016-02-21 21:41:58
【问题描述】：

我有一个 <form> 和 AJAX 脚本，可以将数据从表单发送到控制器。

    <form:form method="POST" modelAttribute="message"
                        accept-charset="utf-8" ng-app="vandh" ng-controller="validateCtrl"
                        name="messageForm" novalidation="true">

<form:textarea path="text" class="form-control" rows="1" name="message"
                            id="message" ng-model="message" required="true"></form:textarea>
                        <div style="color: black"
                            ng-show="messageForm.message.$dirty && messageForm.message.$invalid">
                            <span ng-show="messageForm.message.$error.required"><spring:message
                                code="label.entermessage" /></span>
                        </div>
                        <br>
                        <div class="text-center">
                        <button class="btn btn-success" id="addMessage" name="addMessage"><spring:message
                                code="label.sendmessage"/></button>
                        </div>

</form:form>


<script>
$("#addMessage").click(function() { 
    var text = $('#message').val();
    $.ajax({ 
    type : "POST", 
    url: "/app/user/messages/${iddialog}" , 
    async : true, 
    dataType:'json',
    contentType: 'application/json',
    data : { 
    text : text 
    } 
    }); 

    });
</script>

这是我的这个页面的控制器

  @RequestMapping(value = "/user/messages/{iddialog}", method = RequestMethod.POST)
    public @ResponseBody Message messages(HttpServletRequest request, HttpServletResponse response,
            @PathVariable(value = "iddialog") int iddialog, Principal principal,@RequestParam(value="text")String text ) {

        System.out.println("ITS HERE");
        if (checkingMessage(text) != true) {
            DateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
            // get current date time with Date()
            Date date = new Date();
            System.out.println(dateFormat.format(date));
            Dialog dialog = new Dialog();
            dialog.setIddialog(iddialog);
            Message mess = new Message();
            mess.setText(text);
            mess.setDialog(dialog);
            mess.setDate(dateFormat.format(date));
            mess.setMessender(principal.getName());
            this.messageService.addMessage(mess);
            this.dialogService.updateUnreadMessInfo(iddialog, principal.getName());

            System.out.println("message sent!");
            return mess;
            // return "redirect:/user/messages/"+iddialog;
        }
        else{
            Message mess1 = new Message();
    return mess1;
        }
}
    @RequestMapping(value = "/user/messages/{iddialog}", method = RequestMethod.GET)
    public String messagesList(@PathVariable(value = "iddialog") int iddialog, Model model, Principal principal) {
        model.addAttribute("message", new Message());
        model.addAttribute("listMessagesForUser", messageService.listMessagesForUser(iddialog));
        model.addAttribute("userDialogWith", dialogService.usernameDialogWith(iddialog, principal.getName()));
        model.addAttribute("countOfNewUsers", this.usersService.countOfNewUsers());
        model.addAttribute("allUserMess", this.dialogService.allNewMessForUser(principal.getName()));
        System.out.println("ID dialog is: " + iddialog);
        return "messagesWithUser";
    }

当我从 AJAX 脚本向我的控制器发送数据时，它会返回我的 Message 对象：

但是当我提交我的<form> 时，我需要防止重新加载我的页面。我看了很多指南，但这是我得到的最高结果！请帮帮我！我需要做什么，当我提交表单时我的页面不会刷新！！！！

【问题讨论】：

标签： java jquery ajax spring spring-mvc

【解决方案1】：

您需要从您的点击处理程序中return false 以防止执行默认操作（提交表单）。

【讨论】：

为您解答！你能在我的代码中给我一个例子吗！？
它给了我一个错误Failed to load resource: http://localhost:8080/app/user/messages/7 the server responded with a status of 403 (Forbidden)
@SergShapoval：你需要调试你的服务器来弄清楚它为什么拒绝。

【解决方案2】：

您可以使用阻止默认来停止默认操作。 https://api.jquery.com/event.preventdefault/

【讨论】：

【解决方案3】：

根据您的前端代码，您使用的是 AngularJS，但您使用的是 jQuery 来触发按钮点击。

你可以做的是在你的控制器（validateCtrl）中创建一个函数来处理点击事件并将消息模型发布到后端，通过使用angular的ng-click指令并将属性type='button'添加到按钮到防止触发表单的提交。

你的按钮应该是这样的：

<button type="button" class="btn btn-success" id="addMessage" name="addMessage" ng-click="addMessageClick(message)">

关于 Angular $http 的文档：https://docs.angularjs.org/api/ng/service/$http

angular.module('app', []);

angular.module('app', []).controller('validateCtrl', ['$scope', '$http',
  function($scope) {

    //You could pass the message model here as a parameter or access it using $scope.message
    $scope.addMessageClick = function(message) {
      //Use AngularJS's $http or jQuery Ajax to post to backend and send the message model
      console.log('test');
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<html>

<head></head>

<body ng-app="app">
  <form name="messageForm" ng-controller="validateCtrl" novalidate>
    <button ng-click="addMessageClick('test')">Test</button>
  </form>
</body>

</html>

【讨论】：

【解决方案4】：

您已在表单中添加了提交按钮，当您单击提交按钮以及 ajax 调用时，由于表单正在重新加载页面

请将提交按钮放在表单标签之外并检查，您的页面重新加载问题将得到解决

【讨论】：