Developing a MySQL Community Server-backed RESTful Web Service with the power of jQuery AJAX

I am currently in the process of developing a RESTful Web Service using MySQL Community Server alongside jQuery AJAX

Unfortunately, my usage of jQuery AJAX is not functioning as expected. When attempting to add, delete, update a product, or retrieve all products, my webpage does not respond to any clicks.

I am unsure of what I may have overlooked on my webpage. Would you be able to assist me in resolving this issue?

Here is a snippet from my webpage:

<button onclick="addProduct()"> Save </button>
<script>
    function addProduct() {
        var productData = {
            id: document.getElementById("id").value,
            name: document.getElementById("name").value,

        }

        $.ajax({
            url: "http://127.0.0.1:3306/app/products",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            type: "POST",
            dataType: "json",
            data: JSON.stringify(productData)
        });
    }
</script>

Here is a segment from my java class:

@RequestMapping(method = RequestMethod.GET, value = "/app/products")
public List<Product> getAllProducts(){
    return productService.getAllProducts();}

@RequestMapping(method = RequestMethod.POST, value = "/app/products")
public void addProduct(@RequestBody Product product){
    productService.addProduct(product); }

Answer №1

Seems like you are attempting to connect to your database through port 3306 instead of accessing the Spring Boot application which typically runs on port 8080.

To resolve this issue, simply update the AJAX url to:

http://127.0.0.1:8080/app/products
.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What seems to be the issue with loading this particular file into my JavaScript code?

When attempting to import a file into my code, I encountered an issue where the folder could not be found. Interestingly, when manually typing out the folder name, it is recognized and suggested by the system. Even providing the full path did not yield dif ...

The issue of duplicated elements arises when Ajax is utilized within Django

Upon form submission, a Graph is generated using Plotly. Utilizing Ajax to submit the form without refreshing the page results in duplicating the form div on the screen. How can this issue be resolved? The code snippet below showcases my implementation wit ...

Troubleshooting: Dealing with ng-click and invalid functions

Prior to resolving the issue, I encountered a component (within an HTML template) containing a ng-click that was invoking a nonexistent function. Is there a method to enable a strict mode (similar to 'use strict' in JS) or something equivalent t ...

Can these similar functions be combined into a single, unified function?

Currently, I have 3 functions - and more to come soon - that all perform the same task. However, they control different enumerated divs/variables based on which div triggers the mousewheel event. I am wondering if there is a way to condense these very si ...

Update the JSON data following deletion

I have received the following JSON data: "memberValidations": [ { "field": "PRIMARY_EMAIL", "errorCode": "com.endeavour.data.validation.PRIMARY_EMAIL", "createdDateTime": null }, ...

Deciphering Google geocode output in Java - unable to locate JSONArray[0] (even though it exists)

UPDATE: I have encountered a problem with integrating a direction service program into my geocode project. Despite the code working separately, when combined, it throws an error consistently. (Using Eclipse, Java EE, and Tomcat7) For your reference, below ...

Looking for a Java resource that houses the ChromeDriver constants for browser preferences?

When using Selenium WebDriver to launch the Chrome browser, the first step is to set the system property, like so - System.setProperty("webdriver.chrome.driver", chromeDriverLocation); In this case, we specify 'webdriver.chrome.driver', which i ...

When using AngularJS $http to send an object as a JSON key to a Spring controller, the returned value

I am attempting to transmit a json object from javascript to the Spring controller. My method of choice is using angularJs $http post for this. The issue arises when I send the key as object, with the lastName showing up as null. Strangely, if I send the s ...

Implementing a switch to trigger a JavaScript function that relies on a JSON object retrieved from a GET request

Having some trouble using a toggle to convert my incoming Kelvin temperature to Celsius and then to Fahrenheit. It loads properly as default Celsius when the page first loads, but once I try toggling the function outside of locationLook, it doesn't se ...

Convert a web page with embedded images using Base64 strings into a PDF file using JavaScript

My website has numerous images with base 64 string sources. Typically, I am able to download the HTML page as a PDF using a service method that involves sending the HTML page with a JSON object and receiving the PDF in return. However, when there are many ...

Unable to tap on the image icon

Struggling to click on an image button, I keep receiving the error org.openqa.selenium.NoSuchElementException. I've checked all iframes thoroughly but the element is nowhere to be found. Is there something crucial I'm overlooking? Any assistance ...

Utilizing jQuery and PHP to Refine Database Search Results

I am a novice currently embarking on my journey to create my first website, integrated with a database system which is also new territory for me. Struggling to decide between jQuery and PHP for a specific task related to data handling, I seek guidance from ...

Is it necessary to validate when invoking a partial view using ajax?

public PersonViewModel() { Children = new List<ChildViewModel>(); } [Required(ErrorMessage = "Required!")] public string FName { get; set; } [Required(ErrorMessage = "Required!")] public string LName { get; set; } ...

What causes the text field and checkbox to move downward as I enter text?

I'm currently working on a mock login page using React and Material UI. I implemented a feature where the show/hide password icon only appears when the user starts typing in the password field. However, after making this change, I noticed that the pas ...

Issue Parsing JSON Information - Asynchronous Operation

I encountered an issue with the message Error parsing Data when handling exceptions while parsing JSON data in my main code block. The error No Data Found is not being captured within the JSONException, leading me to believe that the database query is suc ...

PHP and AJAX issue with numerical formatting

I have a text box formatted with the following syntax: $("#cont_dt").blur(function(){ $(this).format({format:"#,###.00", locale:"us"}); }) It works fine. For example, if I type 250000.50, it automatically formats to 250,000.50 However, the prob ...

Encountered an issue when trying to retrieve 4,000 rows from the MySQL Server

After attempting to run this loop more than 3 times, I encountered an error. My goal was to populate a HTML table view on my webpage with data. $offset=0; for ($i = 0; $i < 5; $i++) { $offset = ($i * 1000); if ($i == 0) { $offset = ""; ...

The present IP address of the client through AJAX and PHP

This code snippet is on my PHP page: // Setting the timezone to Asia/Manila date_default_timezone_set('Asia/Manila'); $date = date('m/d/Y h:i:s a', time()); if (!empty($_SERVER['HTTP_CLIENT_IP'])){ $ip=$_SERVER['HTTP_C ...

The jQuery statements are not properly executing the if and else conditions

i'm currently assessing the condition using this particular code. jQuery(document).ready(function($){ $('#uitkering_funds').hide(); $('#uitkering_funds_hoofd').hide(); $('#partner_uitkering').hide(); $('#par ...

Is it possible to redefine a function that is attached to $ctrl outside of the AngularJS framework?

Within my DOM, there exists an element containing ng-click="$ctrl.goToHome(), which is connected to the logo on my site. This particular element is generated by a third-party AngularJS application. The complete element can be seen below: <img ng-if=":: ...