Question

我有一个<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>时，我需要阻止重新加载我的网页。我看到很多向导，但这是我得到的最高成绩！帮帮我！我需要做的是，当我提交表单时，我的页面不会刷新!!!!

Answer 1

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

Answer 2

您可以使用“防止默认值”停止默认操作。 https://api.jquery.com/event.preventdefault/

Answer 3

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

你可以做的是在控制器中创建一个函数（validateCtrl）来处理click事件并将消息模型发布到后端，使用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

的文档

＆＃13;

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');
    };
  }
]);

＆＃13;

<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>

＆＃13;

Answer 4

您已经在表单中添加了“提交”按钮，并且由于表单而在单击“提交”按钮以及ajax调用时重新加载了页面

请将该提交按钮置于表单标签之外，然后检查，您的页面重新加载问题将得到解决

如何防止页面刷新？ AJAX，Spring MVC

4 个答案: