Question

我是春季MVC的新手。我从.jsp表格中获取一些数据并验证来自数据库的相同数据，如果输入的数据已经存在，那么我想打印一条消息：“ALREADY PRESENT ENTER DNCFERENT DATA”，否则“数据已成功添加”但在同一网页上用户输入数据的位置不在单独的网页上。

_____________
**form.jsp**
_____________
<html>
<head>
<meta charset="ISO-8859-1">
</head>
<body>
<form action="signup.op" method ="post">
<input type = "text" name="nm">
<input type = "password" name="pwd">
<input type = "num" name = "mobileNumber">
<input type = "submit" value="press"><br>
</form>
</body>
</html>

-----------------------------
_________________
**Controller class**
_________________
-------------------------------------------------------------------------------
**NOTE**:Before reading this code I want to clear you pople that in this Controller I am using *ModelAndView* to show the message on a separate response.jsp page but actually I don't want it.
------------------------------------------------------------------------------

    @Controller
    @RequestMapping("/")
    public class Controller {

        @Autowired
        private Services services;

        //constructor
        public Controller() {
    System.out.println(getClass().getName());
        }

        @RequestMapping(value="signup.op", method = RequestMethod.POST)
        public ModelAndView signup( DTO dto) {

        /*don't confuse from the below line of code I am just storing a String
        type of value("yes" or "no") in "returnFromServices" variable and based on 
        this value I want to send the message(that is mentioned above) on the same 
         web page*/
         String returnFromServices = services.saveStudentRecords(dto);

        ModelAndView modelAndView = new ModelAndView("response.jsp");
        if(returnFromServices.equals("yes")) {
    modelAndView.addObject("message", "ALREADY PRESENT ENTER DIFFERENT DATA");
            return modelAndView;
        }

            modelAndView.addObject("message","DATA ADDED SUCCESSFULLY" );
            return modelAndView;
       }
    }

Answer 1

使用可以使用ajax调用来调用Spring MVC中的控制器mathod并使用bootstrap模式在同一页面上显示响应消息

这是代码段，

Ajax调用

function postAjaxWithJSONData(url,formId,callback){
     var data = JSON.stringify(jQuery(formId).serialize());
     $.ajax({ 
             url: url,    
             type: "POST",
             data:$(formId).serializeObject(),
             dataType : "json",
             success: function(respose) {
                    if(respose.status == 'error') {
                        showAjaxResponseMessage(respose);
                    } else {
                        callback(respose);
                        showAjaxResponseMessage(respose);
                    }
                },
             error: function(){
                 console.log('error');
             }
         });
}

function showAjaxResponseMessage(response) {
     $("#message").text(response.message);
     $('#message-modal').modal('show');
}

function editUser() {
    var editCallback = function(){
        $('#myModal').modal('hide');
        //displayDashboardContent();
    };
    postAjaxWithJSONData('editUser','#editUser',editCallback);
}

HTML代码

jsp page

 <form id="editUser">
    <div class="modal-body">
       <div class="form-group">
          <input type="hidden" class="form-control" name="id" value=""/>
          <br/>

          <label for="username" class="form-control-label">First Name</label>
          <input type="text" class="form-control" name="firstName" value=""/>
          <br/>
      </div>

      <div class="form-group">
          <label for="username" class="form-control-label">Last Name</label>
          <input type="text" class="form-control" name="lastName" value=""/>
          <br/>
      </div>

      <div class="form-group">
          <label for="username" class="form-control-label" >Username</label>
          <input type="text" class="form-control" name="userName" value="" readonly/>
          <br/>
      </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" onclick="editUser()">Save</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</form>

模态弹出窗口

     <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal">&times;         </button>
           <h4 class="modal-title">Message</h4>
        </div>
        <div class="modal-body">
           <p id="message"></p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
     </div>
  </div>

<强> EDIT1

控制器方法将是，

@RequestMapping(value = "editUser", method = RequestMethod.POST)
public @ResponseBody ResponseVO editUser(@ModelAttribute(value = "userVO") UserDataVO userDataVO) {
    logger.debug("in editUser controller");
    ResponseVO responseVO = userServiceImpl.editUser(userDataVO);
    return responseVO;
}

如何在spring mvc的同一页面上显示成功消息（在验证数据库中的数据之后）？

1 个答案: