web-dev-qa-db-fra.com

Charger un fichier .text avec JQuery ou Ajax

Comment puis-je réparer le script ci-dessous pour qu'il fonctionne CHAQUE FOIS! Parfois cela fonctionne et parfois non. Pro JQuery explique la cause de ceci, mais ne dit pas comment le réparer. Je suis presque certain que cela a à voir avec l'état de préparation ajax mais je ne sais pas comment l'écrire. Le Web montre environ 99 façons différentes d’écrire ajax et JQuery, c’est un peu écrasant. 

Mon objectif est de créer un shell HTML pouvant être rempli de texte à partir de fichiers texte basés sur le serveur. Par exemple: Supposons qu'il existe un fichier texte sur le serveur nommé AG et que son contenu est PF: PF-01, PF-02, PF-03, etc. Je souhaite extraire ces informations et remplir le DOM HTML avant de les afficher. vu par l'utilisateur. A était @ #! # $ * Et doré avec PHP, puis a découvert que mon hôte a fermé la fonction fopen (). Alors je suis là.

Merci pour ton aide.

JS - plantSeed.js 

var pageExecute = {

fileContents:"Null",
pagePrefix:"Null",
slides:"Null",

init:function () {
    $.ajax({
      url: "./seeds/Ag.txt",
      success: function (data){
            pageExecute.fileContents = data;
      }
});
}
};

HTML - HEAD 

<script type="text/javascript">
    pageExecute.init();
</script>

HTML - CORPS 

<script type="text/javascript"> alert(pageExecute.fileContents); </script>
javascriptajaxjquerytext-files
10
atomSmasher

Essaye ça:

var pageExecute = {

    fileContents:"Null",
    pagePrefix:"Null",
    slides:"Null",

    init: function () {
        $.ajax({
            url: "./seeds/Ag.txt",
            async: false,
            success: function (data){
                pageExecute.fileContents = data;
            }
        });
    }
};
12
Novak

Essaye ça:

HTML:

<div id="target"></div>

JavaScript:

$(function(){
    $( "#target" ).load( "pathToYourFile" );
});

Dans mon exemple, la div sera renseignée avec le contenu du fichier. Jetez un coup d’œil à jQuery .load() function.

Le "pathToYourFile" peut être n'importe quelle ressource qui contient les données que vous voulez charger. Consultez la documentation de la méthode de chargement pour plus d'informations sur son utilisation.

Edit: Autres exemples pour obtenir la valeur à manipuler

Utilisation de la fonction $.get() :

$(function(){
    $.get( "pathToYourFile", function( data ) {
        var resourceContent = data; // can be a global variable too...
        // process the content...
    });
});

Utilisation de la fonction $.ajax() :

$(function(){
    $.ajax({
        url: "pathToYourFile",
        async: false,   // asynchronous request? (synchronous requests are discouraged...)
        cache: false,   // with this, you can force the browser to not make cache of the retrieved data
        dataType: "text",  // jQuery will infer this, but you can set explicitly
        success: function( data, textStatus, jqXHR ) {
            var resourceContent = data; // can be a global variable too...
            // process the content...
        }
    });
});

Il est important de noter que:

$(function(){
    // code...
});

Est le même que:

$(document).ready(function(){
    // code
});

Et normalement, vous devez utiliser cette syntaxe, car vous voudriez que le DOM soit prêt à exécuter votre code JavaScript.

10
davidbuzatto

Je recommande de ne pas utiliser url: "./seeds/Ag.txt",, pour cibler directement un fichier. À la place, utilisez un script côté serveur llike PHP pour ouvrir le fichier et renvoyer les données, au format plan ou au format JSON.

Vous pouvez trouver un tutoriel pour ouvrir des fichiers ici: http://www.tizag.com/phpT/fileread.php

1
blasteralfred Ψ

Voici votre problème: Vous avez une balise de script dans le corps qui demande les données AJAX . Même si vous lui demandiez d'écrire les données dans votre shell, et pas seulement lancez-le ......... c'est votre problème numéro un.

Voici pourquoi:

AJAX est asynchrone ... Bien, nous le savons déjà, mais qu'est-ce que cela signifie?

Eh bien, cela signifie qu’il va aller sur le serveur et demander le fichier . Le serveur va regarder, et le renvoyer. Ensuite, votre ordinateur va télécharger le contenu. Lorsque le contenu est téléchargé à 100%, il sera disponible.

... la chose est ...

Votre programme n'attend pas que cela se produise . Il dit au serveur de prendre son temps, et entre-temps, il continuera à faire ce qu'il est en train de faire, et il ne va pas penser au contenu à nouveau un appel du serveur.

Eh bien, les navigateurs sont vraiment très rapides en rendu HTML . Les serveurs sont vraiment très rapides en servant des fichiers statiques (texte brut/img/css/js) également.

Alors maintenant vous êtes dans une course… .qui va se passer en premier? Le serveur va-t-il rappeler le texte ou le navigateur va-t-il appuyer sur la balise script qui demande le contenu du fichier?

Celui qui gagne sur cette actualisation est celui qui se produira.

Alors, comment vous en sortez-vous? Callbacks.

Les rappels sont une façon de penser différente ..__ En JavaScript, vous effectuez un rappel en donnant à l'appel AJAX une fonction à utiliser lorsque le téléchargement est terminé.

Ce serait comme appeler quelqu'un depuis une ligne de travail et dire: composez CETTE extension pour me joindre, lorsque vous avez une réponse pour moi.

Dans jQuery, vous utiliserez un paramètre appelé "success" dans l'appel AJAX . Faites de success : function (data) { doSomething(data); } une partie de l'objet que vous passez à l'appel AJAX . Au moment du téléchargement du fichier, jQuery transmettra les résultats à la fonction de succès que vous lui avez donnée, qui fera tout ce que vous avez à faire, ou appellera toutes les fonctions pour lesquelles il a été appelé.

Essaie. Il vaut certainement mieux que les courses pour voir quels téléchargements en premier.

1
Norguard