Level 4

解決済み

How to invoke a service on submit button to post the input data in json format to servlet?

Forum|Forum|2 years ago
September 10, 2023
6 の返信
3245 ビュー

Hi,
I've created a form on page with some input fields & submit button. It's more like HTML form. There's a servlet that accepts the data in Json format & processes it in backend. Now, I want to create a service/model that will get invoke when submit button is clicked & it should take the values from each input field available on page convert it to json & post to servlet.
I'm able to achieve this by JavaScript but business demands the same via backend.

Can anyone please help me accomplish this by sharing any reference or code snippets that I could leverage.
Thanks,
sesmic

このトピックへの返信は締め切られました。

ベストアンサー aanchal-sikka

Hello @sesmic

Servlet cannot pull data from an HTML form. It has to be submitted to it.

Please refer to https://www.tutorialspoint.com/How-to-submit-an-HTML-form-using-JavaScript

If the values being entered are injected properly into <input> fields of a form, we need not compile all information. It will submitted via form.submit().
A servlet will be called and values will be available in Request params of the Servlet.

aanchal-sikka

回答

Community Advisor

Hello @sesmic

Servlet cannot pull data from an HTML form. It has to be submitted to it.

Please refer to https://www.tutorialspoint.com/How-to-submit-an-HTML-form-using-JavaScript

If the values being entered are injected properly into <input> fields of a form, we need not compile all information. It will submitted via form.submit().
A servlet will be called and values will be available in Request params of the Servlet.

Aanchal Sikka

Harwinder-singh

Community Advisor

@sesmic , Can you not call a servlet on submit of the form and let the servlet handle conversion of the fields into a JSON equivalent and any other input data processing(ideally delegated to a Service class) thereon?

You can check out this article on how Sling servlets work in general.

https://sling.apache.org/documentation/the-sling-engine/servlets.html

https://medium.com/@toimrank/aem-sling-servlet-ca9e5926a384

sesmic作成者

Level 4

Yes, that's a good idea @harwinder-singh! But still I would need some reference or code snippet to achieve the same like how to fetch the field data & parse into JSON.😅
I will look into this approach.

A_H_M_Imrul

Community Advisor

Hello @sesmic,

To add with @aanchal-sikka and @harwinder-singh, not sure if you have any JS library (jquery or angular) in-place or not. If so you can hand over the responsibility of managing the submission to the JS library. Following is jquery example:

<!DOCTYPE html>
<html>
<head>
    <title>Form Submission</title>
</head>
<body>
    <form id="myForm" action="YourServletURL" method="post">
        <input type="text" name="param1" placeholder="Parameter 1">
        <input type="text" name="param2" placeholder="Parameter 2">
        <button type="submit">Submit</button>
    </form>

    <div id="response"></div>

    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- jQuery Script for Form Submission -->
    <script>
        $(document).ready(function() {
            $("#myForm").submit(function(event) {
                event.preventDefault(); // Prevent the default form submission

                var formData = $(this).serialize(); // Serialize form data

                $.ajax({
                    type: "POST",
                    url: $(this).attr("action"), // Servlet URL
                    data: formData,
                    success: function(response) {
                        $("#response").html(response); // Display the response from the servlet
                    },
                    error: function() {
                        $("#response").html("An error occurred.");
                    }
                });
            });
        });
    </script>
</body>
</html>

let me know if that goes with your expectation or not.

Thanks

sesmic作成者

Level 4

Hi @a_h_m_imrul ,
Thanks for the response. The solution you shared is great & works but as I mentioned there's demand for some backend solution. That's I'm looking for something like service to be specific.
Thanks again

A_H_M_Imrul

Community Advisor

Hello @sesmic,

Thanks for the clarification.

If I quote your ask "I want to create a service/model that will get invoke when submit button is clicked & it should take the values from each input field available on page convert it to json & post to servlet"

As you can see the invocation of back-end service (Servlet is this case) is actually happening here (the example I shared). The event of button-click needs to be bind from front-end (no matter what the business is).

So now what exact logic that you want to implement within the service/model? If you can provide little more insight, probably I will be able to help.

Thanks

サインアップ

ソーシャルログイン

コミュニティへログイン

ソーシャルログイン