anishcana commented 4 months ago

<project xmlns="http://maven.apache.org/POM/4.0.0"

     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

<modelVersion>4.0.0</modelVersion>

<groupId>com.example</groupId>

<artifactId>springboot-ajax-demo</artifactId>

<version>1.0.0</version>

<parent>

    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-starter-parent</artifactId>

    <version>2.6.3</version>

</parent>

<dependencies>

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-web</artifactId>

    </dependency>

    <dependency>

        <groupId>com.fasterxml.jackson.core</groupId>

        <artifactId>jackson-databind</artifactId>

    </dependency>

</dependencies>

<properties>

    <java.version>11</java.version>

</properties>

package com.example.springbootajax;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication

public class SpringBootAjaxDemoApplication {

public static void main(String[] args) {

    SpringApplication.run(SpringBootAjaxDemoApplication.class, args);

}

}

package com.example.springbootajax;

public class Message {

private String content;

public String getContent() {

    return content;

}

public void setContent(String content) {

    this.content = content;

}

}

[

{

"content": "Hello, World!"

}

]

package com.example.springbootajax;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.GetMapping;

@Controller

public class HomeController {

@GetMapping("/")

public String index() {

    return "index";

}

}

index.jsp: This is the JSP file where the JSON data will be displayed.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

Spring Boot AJAX Demo

Message:

MessageController.java: This is a REST controller class that returns the JSON data.

package com.example.springbootajax;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.RestController;

import com.fasterxml.jackson.databind.ObjectMapper;

import java.io.IOException;

import java.io.InputStream;

import java.util.List;

@RestController

public class MessageController {

@GetMapping("/api/messages")

public Message getMessage() throws IOException {

    ObjectMapper mapper = new ObjectMapper();

    InputStream inputStream = getClass().getClassLoader().getResourceAsStream("static/messages.json");

    List<Message> messages = mapper.readValue(inputStream, mapper.getTypeFactory().constructCollectionType(List.class, Message.class));

    return messages.get(0);

}

}

package com.example.springbootajax;

public class Message {

private String content;

private int serialNumber;

private String param1;

private String param2;

private String param3;

public String getContent() {

    return content;

}

public void setContent(String content) {

    this.content = content;

}

public int getSerialNumber() {

    return serialNumber;

}

public void setSerialNumber(int serialNumber) {

    this.serialNumber = serialNumber;

}

public String getParam1() {

    return param1;

}

public void setParam1(String param1) {

    this.param1 = param1;

}

public String getParam2() {

    return param2;

}

public void setParam2(String param2) {

    this.param2 = param2;

}

public String getParam3() {

    return param3;

}

public void setParam3(String param3) {

    this.param3 = param3;

}

}

[

{

"content": "Hello, World!",

"serialNumber": 1,

"param1": "Value1",

"param2": "Value2",

"param3": "Value3"

}

]

package com.example.springbootajax;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.RestController;

import com.fasterxml.jackson.databind.ObjectMapper;

import java.io.IOException;

import java.io.InputStream;

import java.util.List;

@RestController

public class MessageController {

@GetMapping("/api/messages")

public Message getMessage() throws IOException {

    ObjectMapper mapper = new ObjectMapper();

    InputStream inputStream = getClass().getClassLoader().getResourceAsStream("static/messages.json");

    List<Message> messages = mapper.readValue(inputStream, mapper.getTypeFactory().constructCollectionType(List.class, Message.class));

    return messages.get(0);

}

}

anishcana commented 4 months ago

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html>

Display JSON Object

anishcana commented 4 months ago

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html>

Display JSON Object

anishcana commented 4 months ago

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html>

Display JSON Object

Attribute	Value

anishcana commented 4 months ago

Attribute	Value

Attribute	Value

anishcana commented 4 months ago

                // Iterate through the JSON object and display it in a tabular format
                $.each(data, function(key, value) {
                    $("#jsonTableBody").append("<tr><td>" + key + "</td><td>" + value + "</td></tr>");
                });
            },
            error: function() {
                $("#jsonTableBody").html("<tr><td colspan='2'>Error loading JSON data.</td></tr>");
            }
        });
    });

anishcana commented 4 months ago

// Make an AJAX request to fetch the JSON data $.ajax({ url: 'your_data_endpoint', method: 'GET', success: function(data) { // Create a table dynamically var table = $('

');

// Create table header row
var headerRow = $('<tr>');
$.each(data[0], function(key, value) {
  headerRow.append($('<th>').text(key));
});
headerRow.append($('<th>').text('Serial Number'));
table.append(headerRow);

// Populate the table with data
$.each(data, function(index, record) {
  var row = $('<tr>');
  $.each(record, function(key, value) {
    row.append($('<td>').text(value));
  });
  row.append($('<td>').text(index + 1));
  table.append(row);
});

// Add the table to the document
$('#table-container').append(table);

}, error: function(xhr, status, error) { console.error('Error fetching data:', error); } });

anishcana / jovial

Ajax #1

Message: