spring boot jquery ajax form submit

Question

I want to submit my jsp using jquery ajax form submit. While submitting browser showing "Content type 'application/json;charset=utf-8' not supported"

   var form = $('#encryptForm');
            $(function() {
               $('button[type=submit]').click(function(e) {
                  //Prevent default submission of form
                  e.preventDefault();

                  $.post({
                     url : 'encrypt',
                     dataType: "json",
                     contentType: "application/json; charset=utf-8",
                     data : form.serialize(),
                     success : function(res) {
                         console.log(res)
                     }
                  })
               });
            });



  <form id="encryptForm" name="encryptForm" method="POST">
                <fieldset>
                    <legend>User Fields</legend>
                    <p>
                        <textarea rows="4" cols="50" id="encryptData" >{"mid":"MID-NehoT","message":"hello"}</textarea>
                    </p>
                    <p>
                        <button type="submit">Submit</button>
                    </p>
                </fieldset>
            </form>



       @RequestMapping(value = "/encrypt", method = RequestMethod.POST)
        public Response post(@RequestBody Request request) {

            return null;
        }



@JsonIgnoreProperties(ignoreUnknown = true)
public class Request {
    private String mid;
    private String message;



    @JsonCreator
    public Request(String mid, String message) {
        this.mid = mid;
        this.message = message;
    }

    public String getMid() {
        return mid;
    }

    public void setMid(String mid) {
        this.mid = mid;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

MyTwoCents · Accepted Answer · 2018-08-06 09:28:07Z

1

You are defining dataType: "json", but passing form.serialize() which is not JSON

Pass JSON like this

$('button[type=submit]').click(function(e) {
  //Prevent default submission of form
  e.preventDefault();
  var json = {"mid":"MID-NehoT","message":"hello"}
  $.post({
     url : 'encrypt',
     dataType: "json",
     contentType: "application/json; charset=utf-8",
     data : JSON.stringify(json),
     success : function(res) {
         console.log(res)
     }
  })
});

I also assume your Request object contains field mid and message

answered Aug 6, 2018 at 9:28

MyTwoCents

7,6723 gold badges28 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MyTwoCents Over a year ago

This might help forum.spring.io/forum/spring-projects/web/…

MyTwoCents Over a year ago

Also pls add Request class in Question

boycod3 Over a year ago

Request class added

Sudhir Ojha · Accepted Answer · 2018-08-06 09:30:23Z

1

Either remove @RequestBody from your code like following:

@RequestMapping(value = "/encrypt", method = RequestMethod.POST)
public Response post() {
    return null;
}

or use Map instead like following:

@RequestMapping(value = "/encrypt", method = RequestMethod.POST)
public Response post(@RequestBody Map<String, Object> requestData) {
   return null;
}

answered Aug 6, 2018 at 9:30

Sudhir Ojha

3,3053 gold badges16 silver badges28 bronze badges

1 Comment

boycod3 Over a year ago

No I want to post with the object.

boycod3 · Accepted Answer · 2018-08-06 10:51:32Z

0

  $.post({
     url : 'encrypt',
     dataType: "json",
     contentType: "application/json; charset=utf-8",
     data : $('#txtEn').val(),
     success : function(res) {
         console.log(res)
     }
  })

i just passed as normal string.

answered Aug 6, 2018 at 10:51

boycod3

5,34314 gold badges61 silver badges93 bronze badges

Collectives™ on Stack Overflow

spring boot jquery ajax form submit

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related