Spring Boot Ajax example

This article will show you how to use jQuery.ajax to send a HTML form request to a Spring REST API and return a JSON response. Tools used : Spring Boot 1.5.1.RELEASE Spring 4.3.6.RELEASE Maven 3 jQuery Bootstrap 3 Note You may interest at this classic Spring MVC Ajax example 1. Project Structure A standard Maven …

Read more

jQuery Ajax submit a multipart form

A simple jQuery Ajax example to show you how to submit a multipart form, using Javascript FormData and $.ajax() 1. HTML A HTML form for multiple file uploads and an extra field. <!DOCTYPE html> <html> <body> <h1>jQuery Ajax submit Multipart form</h1> <form method="POST" enctype="multipart/form-data" id="fileUploadForm"> <input type="text" name="extraField"/><br/><br/> <input type="file" name="files"/><br/><br/> <input type="file" name="files"/><br/><br/> <input …

Read more

Spring Boot file upload example – Ajax and REST

This article shows you how to upload files in Spring Boot web application (REST structure), using Ajax requests. Tools used in this article : Spring Boot 1.4.3.RELEASE Spring 4.3.5.RELEASE Thymeleaf jQuery (webjars) Maven Embedded Tomcat 8.5.6 Google Chrome Browser (Network Inspect) 1. Project Structure A standard Maven project structure. 2. Project Dependency Declares an extra …

Read more

jQuery – Ajax request return 200 OK but error event is fired?

Review a jQuery Ajax form submit. $(document).ready(function () { $("#hostingForm").submit(function (e) { e.preventDefault(e); var data = {} data["id"] = $("#id").val(); data["domain"] = $("#domain").val(); data["name"] = $("#name").val(); //… $.ajax({ type: "POST", contentType: "application/json", url: "{{home}}/hosting/update", data: JSON.stringify(data), dataType: ‘json’, timeout: 600000, success: function (data) { console.log("SUCCESS: ", data); }, error: function (e) { console.log("ERROR: ", e); …

Read more

Spring MVC – Refactoring a jQuery Ajax Post example

Reviewing a jQuery Ajax form POST and Spring MVC example, find out the following patterns : <script> jQuery(document).ready( function($) { $("#btn-save").click(function(event) { var id = $(‘#id’).val(); var domain = $(‘#domain’).val(); var name = $(‘#name’).val(); var desc = $(‘#desc’).val(); var tags = $(‘#tags’).val(); var afflink = $(‘#afflink’).val(); var cdn = $("#cdn").prop("checked") ? true : false; var …

Read more

Spring MVC – find location using IP Address (jQuery + Google Map)

In this tutorial, we show you how to find a location using an IP address, with the following technologies : Spring MVC frameworks. jQuery (Ajax Request). GeoLite database. Google Map. Review the tutorial’s flows A page with a text input and button. Type an IP address, and clicks on the button. jQuery fires an Ajax …

Read more

JSF 2.0 : <f:ajax> contains an unknown id

Problem A JSF’s button with Ajax support… <h:outputText id="output" value="#{helloBean.sayWelcome}" /> <h:form> <h:inputText id="name" value="#{helloBean.name}"></h:inputText> <h:commandButton value="Welcome Me"> <f:ajax execute="name" render="output" /> </h:commandButton> </h:form> When this page is displayed, it prompts the following error message javax.faces.FacesException: <f:ajax> contains an unknown id ‘output’ – cannot locate it in the context of the component j_idt8 Obviously, the …

Read more

JSF 2.0 + Ajax hello world example

In JSF 2.0, coding Ajax is just like coding a normal HTML tag, it’s extremely easy. In this tutorial, you will restructure the last JSF 2.0 hello world example, so that, when the button is clicked, it will make an Ajax request instead of submitting the whole form. 1. JSF 2.0 Page A JSF 2.0 …

Read more

How to get Delicious bookmark count with jQuery and JSON

Delicious, the best bookmark website, provides many APIs to let developers to deal with the bookmarks’ data. Here’s an example to use jQuery to retrieve the total number bookmark count of a given URL. Delicious API To get a total number of bookmark, use this http://feeds.delicious.com/v2/json/urlinfo/data?url=xxx.com&callback=? jQuery Ajax jQuery, comes with an easy but powerful …

Read more