从html页面调用REST Web服务spring控制器，并使用ajax将表单元素与调用一起单独传递

Question

I have a controller that creates a new user for my application (users are stored using MongoDB). I ran the code with @Path and @RequestBody annotations successfully using postman tool.

Now I have to include a UI which is mapped to my controller. I tried passing the values using ajax, and the values are getting passed(upon inspection from my browser). But the controller is not being called.

Then I tried with @RequestMapping and @RequestBody annotations but then I am getting the following warning while accessing it through Postman WARNING: No root resource matching request path /Task1_2/Create/createUser has been found, Relative Path: /Create/createUser.

Finally, I tried with all three annotations @Path , @RequestMapping and @RequestBody then I am getting a response in Postman.

All the above were done by directly calling the controller from Postman through the URI.

But still, now I am not able to get any response on my browser while calling the HTML page which is mapped to my controller.

This is my controller

@RestController

@Path("/Create/")
@RequestMapping("/Create/")
public class CreateUser {
    @POST
    @Path("createUser")
    @RequestMapping(value="createUser",method=RequestMethod.POST,consumes="application/json")
    public Response Create(@RequestBody String request)
    {
    ..... 
    BasicDBObject obj = (BasicDBObject) JSON.parse(request);
    .....
    output = "@Produces(\"application/json\")"+"User Created Successfully";
    return Response.status(200).entity(output).build();
    }

And this is my ajax function

function fun()
        {
            var search = {  UserName: $( "input[name='UserName']" ).val(), 
                            FirstName: $( "input[name='FirstName']" ).val(), 
                            LastName: $( "input[name='LastName']" ).val(),
                            Mobile: $( "input[name='Mobile']" ).val(),
                            EmailId: $( "input[name='Email']" ).val()
                    }
           $.ajax({
              type: "POST",
              contentType : 'application/json; charset=utf-8',
              dataType : 'json',
              url: "/Create/createUser",
              data: JSON.stringify(search), // Note it is important
              success :function(output) {
                  alert(output);
              },
              error: function(e){
                  alert('failure');
              }
          });
        }

I have kept the HTML file(CreateUser.html) with the above script inside the WebContent folder of my project. So 1. What am I doing wrong? 2. Should I be using @Path alone with @RequestMapping

Answer 1

I think it is related to your JSON format which your are sending from Ajax.

This would run

function fun()
        {
            var search = {  UserName: $( "input[name='UserName']" ).val(), 
                            FirstName: $( "input[name='FirstName']" ).val(), 
                            LastName: $( "input[name='LastName']" ).val(),
                            Mobile: $( "input[name='Mobile']" ).val(),
                            EmailId: $( "input[name='Email']" ).val()
                    }
           $.ajax({
              type: "POST",
              contentType : 'application/json; charset=utf-8',
              dataType : 'json',
              url: "/Create/createUser",
              data: JSON.stringify({search : search }), // Note it is important
              success :function(output) {
                  alert(output);
              },
              error: function(e){
                  alert('failure');
              }
          });
        }