How to send Form data to Servlets through Ajax

[Tessa_learner1]

Hi , 

I  am trying to send form data to servlets (path based servlet ) using ajax. Here I have written the code but it's not working. When I submit the form nothing is happening just it refreshes the page. And I don't see any form data in servlet path.  Any idea how to resolve this ??

<button data-sly-use.button="com.adobe.cq.wcm.core.components.models.form.Button"
        type="${button.type}"
        id="${button.id}"
        onclick="doCall()"
        class="cmp-form-button"
        name="${button.name}"
        value="${button.value}">${button.title}</button>
 <script>
 function doCall() {
  var details = {"firstname": $("#firstname").val()};

var userJson = JSON.stringify(details);
alert(userJson);
console.log(userJson);

var url = "/bin/form";

$.ajax({
    url: url,
    type: "POST",
    data: userJson,
    contentType: "application/json",
    error: function(message) {
        console.log(message);
    },
    success: function(data) {
        console.log(data);
    }
  });
}
 </script>

[lukasz-m · Accepted solution]

Hi @Tessa_learner1, it looks that in your code you are not stopping the default submit behavior, and your data are most likely sent do endpoint pointed by action attribute of your form.

You can try below modification. I've tested it locally and it was working fine - data have been submitted without page reload to endpoint configured in JavaScript.

<button data-sly-use.button="com.adobe.cq.wcm.core.components.models.form.Button"
        type="${button.type}"
        id="${button.id}"
        class="cmp-form-button"
        name="${button.name}"
        value="${button.value}">${button.title}</button>
<script>
$(document).ready(function() {
    $(".cmp-form-button").click(function(e){
        e.preventDefault();
    
        var details = {"firstname": $("#firstname").val()};
    
        var userJson = JSON.stringify(details);
        alert(userJson);
        console.log(userJson);
    
        var url = "/bin/form";
    
        $.ajax({
            url: url,
            type: "POST",
            data: userJson,
            contentType: "application/json",
            error: function(message) {
                console.log(message);
            },
            success: function(data) {
                console.log(data);
            }
        });
    }); 
});
 </script>

Here is also topic that covers similar problem: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/servlet-post-request-using...

[Ritesh_Mittal]

Hi @Tessa_learner1 ,

Are you getting any console error, or error in logs? Are you seeing either of the console log being printed?

Also, have you tried debugging your servlet by putting debugger point and see if the invocation is going inside servlet. May be the invocation is going to some other servlet because of some error. Nevertheless resource type based servlets are preferable and safe.

[Varun_Shakya]

Check in /system/console/servletresolver if your servlet is getting resolved.

Or put some logs here.

[Mayank_Gandhi]

@Tessa_learner1 do you get until "userJson" with value?