Download JQuery library and place it in JS folder within one of your web assets folder. Even simpler, include following google script code and you are all set.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Create a form such as following that would be dealt in this example.
<form id="sampleForm" method="post" action="/profile"> <div> <input type="text" name="firstname" id="firstname"> </div> <div> <input type="text" name="lastname" id="lastname"> </div> <div> <button type="submit" name="submit">Submit</button> </div> </form>
Step 3 is about creating AJAX code on UI side that would send the request to server. Following is the sample code that needs to be placed within code.
$(document).ready(function() { $('#sampleForm').submit( function(event) { var firstname = $('#firstname').val(); var lastname = $('#lastname').val(); var data = 'firstname=' + encodeURIComponent(firstname) + '&lastname=' + encodeURIComponent(lastname); $.ajax({ url : $("#sampleForm").attr("action"), data : data, type : "GET", success : function(response) { alert( response ); }, error : function(xhr, status, error) { alert(xhr.responseText); } }); return false; }); });
Last step is about creating server-side code that would recieve AJAX request, process it and send back the response. Following is the code which should be defined within a controller:
package com.vitalflux.sample; @Controller public class SomeController { @RequestMapping(value = "/profile", method = RequestMethod.GET) public @ResponseBody String processAJAXRequest( @RequestParam("firstname") String firstname, @RequestParam("lastname") String lastname ) { String response = ""; // Process the request // Prepare the response string return response; } }
Make sure that you included following in spring-servlet.xml. Note that package name of above controller is same as that mentioned below:
<context:component-scan base-package="com.vitalflux.sample" />
Last updated: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…
Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…
Software-as-a-Service (SaaS) providers have long relied on traditional chatbot solutions like AWS Lex and Google…
Retrieval-Augmented Generation (RAG) is an innovative generative AI method that combines retrieval-based search with large…
The combination of Retrieval-Augmented Generation (RAG) and powerful language models enables the development of sophisticated…
Have you ever wondered how to use OpenAI APIs to create custom chatbots? With advancements…
View Comments
superb post, work fine for me.
Superb Ajitesh Kumar....
thanks a lot