AJAX
jQuery.js
fetch
JavaScript
Børre Stenseth
Fetch >fetchput

fetch og put

Hva

Vi kan også bruke fetch til å lagre filer. Selv om det ikke virker helt logisk kan vi altså bruke fetch [1] med Put. Vi ser på et enkelt eksempel.

Eksemplel 1

Her lar vi brukeren velge en tekt og vi legger den teksten til en fil på serveren

Dagens vær

Koden er slik:

_put.js
//--------------------------
// send a txt to python and append it to "messages.txt"
function sendIt(){
    var pythonAdr="storeFile.py";    
    var txt=document.getElementById("valg").value;
    var D = new Date();
    var Y="\n"+D.getDate()+":"+(D.getMonth()+1)+":"+D.getFullYear();
    var formData=new FormData();
    formData.append('date',Y);
    formData.append('content'," "+txt);
    fetch(pythonAdr, 
        {
        method: 'PUT',
        body:formData
        })
    .then(function(response){
        return response.text();
    })
   .then(function(myText) {
      console.log(myText);
   })
    .catch(function(err) {
        alert("-error- : meldingen er ikke lagret \n"+err);
    });    
}

Det er tre ting å merke seg i koden:

  • Vi bruker Formdata til å preparere de feltene vi vil sende
  • Vi sier at metoden er PUT
  • Det som sendes er angitt som body

Python fila som tar imot teksten er slik:

_storeFile.py

Python koden er laget slik at den fjerner innholdet på fila med ujevne mellomrom.

Vi kan også hente alle lagrede meldinger

Du kan teste her:



Koden er slik.

_get.js
//--------------------------
// fetch "messages.txt"
function fetchIt(){
    var adr="messages.txt";
    fetch(adr, {cache: "no-cache"})
      .then(function(response) {
         if (response.ok)
             return response.text();
         else 
             return response.status+'\n'+response.statusText;
      })
     .then(function(myText) {
         document.getElementById("messages").innerHTML=myText;
      })
}

Du kan også se nærmere på koden og HTML-siden her:

put.html https://borres.hiof.no/wep/js/fetch/fetchput/put.html

Referanser
Fetch >fetchput