Invoke the Java function via AJAX upon button press

Question

Invoke the Java function via AJAX upon button press

In the file blank.jsp, there is a button as follows:

<input class="submit_button" type="submit" id="btnPay" name="btnPay" value="Payment" 
style="position: absolute; left: 350px; top: 130px;" onclick="javascript:payment();">

After clicking this button, I want to execute the Java method callprocedure() using AJAX.

function payment()
    {
        alert('Payment done successfully...');
        ........
        // Use AJAX to call the Java method "callprocedure()"
        ........
    }

I am inexperienced with AJAX. Can someone guide me on how to call a Java method using AJAX? Your help is much appreciated. Thank you in advance.

java javascript ajax

Answer 1

Answer №1

Here is a recommended approach to utilize:

 $.ajax({
            url: '/your-endpoint',
            success: function(data){
            // Executed when the server responds successfully  
            }, error: function(){
               // Executes in case of an error
            }
        });

Answer 2

Here is a recommended approach to utilize:

 $.ajax({
            url: '/your-endpoint',
            success: function(data){
            // Executed when the server responds successfully  
            }, error: function(){
               // Executes in case of an error
            }
        });

Answer 3

Answer №2

It appears that your transaction is being handled by a servlet.

All that's required is:

function processTransaction(){
    $.ajax({
        type: "POST",
        url: "yourServletURL",
        success: function(data){
            alert("Transaction successful");
        },
        error: function (data){
            alert("Sorry, transaction failed");
        }
    });
}

Answer 4

It appears that your transaction is being handled by a servlet.

All that's required is:

function processTransaction(){
    $.ajax({
        type: "POST",
        url: "yourServletURL",
        success: function(data){
            alert("Transaction successful");
        },
        error: function (data){
            alert("Sorry, transaction failed");
        }
    });
}

Answer 5

Answer №3

remove the onclick attribute from the submit button
add an onsubmit event handler to the form
prevent the form from being submitted

I highly recommend using jQuery for this task, especially if you are working with Ajax requests.

If your servlet function is not within the form tag, replace this.action with the name of your servlet.

$(function() {
  $("#formID").on("submit",function(e) { // pass the event
    e.preventDefault(); // stop submission
    $.post(this.action,$(this).serialize(),function(data) {
      $("#resultID").html(data); // display result in element with id="resultID"
      // If the servlet does not return a response, you can display a message
      // $("#resultID").html("Payment successful");
    });
  });
});

Answer 6

remove the onclick attribute from the submit button
add an onsubmit event handler to the form
prevent the form from being submitted

I highly recommend using jQuery for this task, especially if you are working with Ajax requests.

If your servlet function is not within the form tag, replace this.action with the name of your servlet.

$(function() {
  $("#formID").on("submit",function(e) { // pass the event
    e.preventDefault(); // stop submission
    $.post(this.action,$(this).serialize(),function(data) {
      $("#resultID").html(data); // display result in element with id="resultID"
      // If the servlet does not return a response, you can display a message
      // $("#resultID").html("Payment successful");
    });
  });
});

Invoke the Java function via AJAX upon button press

Answer №1

Answer №2

Answer №3

Similar questions

Finding the main page URL using PHP within a JavaScript include: A comprehensive guide

Troubleshooting JavaScript in Internet Explorer 9

Developing a class with array in Java

Steps for utilizing Bazel to compile TypeScript

The error message "Unexpected TypeError: useSearchParams either does not exist as a function or is not iterable in its return value

Incorrect output when converting JSON to DataTable for Google Visualization

Creating dynamic content with Express.js: Using variables in EJS within the request handler

What steps should I take to ensure that my website can recall the most recent interaction conducted by the user?

What is the best approach for incorporating multiple conditions in a React component?

Finding the actual path in any scenario using JavaScript ($.ajax)

The "Accept cookies" button is unresponsive to Webdriver's click command, resulting in an "ElementNotInteractable" Exception being thrown

What is the best way to structure a layout? (Using JFrame, JPanel, etc.)

How can I clear my object so that new Dates() can be added to my calendar?

Enabling and disabling multiple input fields based on the status of a checkbox in order to manage dynamic inputs

Executing functions during the page loading process

Would someone be able to clarify the purpose of this await useState React code?

Manipulating an element in the JSON data is causing alterations to the preceding elements

Send user a notification upon detecting changes in the database - using JavaScript and AJAX!

Encountering a NoSuchElementException error when attempting to use a Datepicker with jQuery

Guide on transferring an array with a specific key to a function parameter (Dealing with multidimensional arrays)