Maison  >  Article  >  développement back-end  >  Comment servir des fichiers statiques dans Gin Router avec un appel AJAX ?

Comment servir des fichiers statiques dans Gin Router avec un appel AJAX ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-04 05:46:29450parcourir

How to Serve Static Files in Gin Router with an AJAX Call?

Fournir un accès aux fichiers statiques dans le routeur Gin

Dans ce guide, nous aborderons le défi de servir un fichier JSON au sein d'un serveur Gin. De plus, nous visons à permettre la personnalisation des fichiers HTML à l'aide de JavaScript pour appeler les données JSON.

La structure de l'application se compose des éléments suivants :

  • main.go : fichier logique principal
  • templates : Répertoire contenant les fichiers HTML et JSON

    • index.html : fichier HTML
    • web.json : fichier JSON

Le fichier main.go inclut les importations nécessaires et définit le routeur.

<code class="go">package main

import (
    "net/http"

    "github.com/gin-gonic/gin"
)

var router *gin.Engine

func main() {
    router = gin.Default()
    router.LoadHTMLGlob("templates/*")

    // Register custom route for serving static JSON file
    router.StaticFS("/web.json", http.Dir("./templates"))

    // Route for rendering the HTML template
    router.GET("/web", func(c *gin.Context) {
        c.HTML(
            http.StatusOK,
            "index.html",
            gin.H{
                "title": "Web",
                "url":   "/web.json",
            },
        )
    })

    router.Run()
}</code>

Dans index.html, le code JavaScript utilise l'URL fournie pour effectuer un appel AJAX pour récupérer les données JSON.

<code class="html"><script>
    window.onload = function() {
        const ui = SwaggerUIBundle({
            url: "{{ .url }}",
            dom_id: '#swagger-ui',
            // ...
        })
        // End Swagger UI call region

        window.ui = ui
    }
</script></code>

En spécifiant la route staticFS pour servir le fichier web.json, nous garantissons son accessibilité pour l'appel AJAX au sein du modèle HTML. Cela résout l’erreur de récupération rencontrée précédemment.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn