How to send Form data to Servlets through Ajax

Forum|Forum|3 years ago
March 30, 2022
4 replies
2681 views

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>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by lukasz-m

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-ajax/td-p/317506

lukasz-m

Accepted solution

Community Advisor

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-ajax/td-p/317506

Ritesh_Mittal

Community Advisor and Adobe Champion

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.