Sending A Json To Server And Retrieving A Json In Return Without Jquery

Have you ever wanted to send a JSON to a server and get a JSON response back, all without relying on jQuery? Well, you're in luck because today we're going to walk through how to achieve just that in your projects.

First things first, let's clarify what JSON actually is. JSON, short for JavaScript Object Notation, is a lightweight data-interchange format that is easy for humans to read and write and for machines to parse and generate. It's commonly used for transmitting data in web applications, making it an essential tool for developers.

To send a JSON to a server without using jQuery, we can leverage modern JavaScript features such as the `fetch` API. The `fetch` API provides an interface for fetching resources across the network and is supported in all modern browsers.

To kick things off, let's create a function that sends a JSON payload to the server. In this example, we'll use a `POST` request:

async function sendJSONToServer(url, data) {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });

  return response.json();
}

In the code snippet above, we define an `async` function called `sendJSONToServer` that takes the `url` of the server and the `data` to be sent. We construct a `POST` request with a header specifying that the content is JSON, and we stringify the `data` object before sending it.

Once the request is made, the `fetch` API returns a promise that resolves to the server's response. We use `response.json()` to extract the JSON content from the response.

Now, let's look at how we can retrieve a JSON response from the server:

async function getJSONFromServer(url) {
  const response = await fetch(url);
  return response.json();
}

In the code snippet above, we define another `async` function called `getJSONFromServer` that takes the server `url` as a parameter. We make a `GET` request to the server and parse the JSON response using `response.json()`.

To put it all together, here's an example of how you can send a JSON to the server and retrieve a JSON in return without using jQuery:

const dataToSend = { message: 'Hello, Server!' };
const serverURL = 'https://example.com/api';

sendJSONToServer(serverURL, dataToSend)
  .then((response) => {
    console.log('Response from server:', response);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

By utilizing the `fetch` API and the power of modern JavaScript, you can easily send and retrieve JSON data without the need for jQuery. This approach provides a more lightweight and efficient solution for interacting with servers in your web applications. Go ahead and give it a try in your projects!

That's all for now. Happy coding!