how to show success message(after validating data

2019-08-23 04:09发布

问题:

I am new in spring MVC. I am taking some data from .jsp form and validating the same data from database if the data entered is already there then I want to print a message:"ALREADY PRESENT ENTER DIFFERENT DATA" otherwise "DATA ADDED SUCCESSFULLY" but on the same web page from where the user is entering the data not on a separate web page.

_____________
**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;
       }
    }

回答1:

Use can use the ajax call to call the controller mathod in Spring MVC and use the bootstrap modal to show the response message on same page

This is the code snippet,

Ajax call

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 code

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 Popup

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

Controller method will be,

@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