How to Use fetch() with JSON

mod_harbour is an Apache module that allows to run PRGs directly on the web !!!

How to Use fetch() with JSON

Postby Otto » Mon Dec 05, 2022 6:55 pm

Hello friends,
I made a small testprogram.
Best regards,
Otto
Download
https://winhotel.org/modchat/download/mh_fetch.zip

fetchtestjson.prg
Code: Select all  Expand view
function main

TEMPLATE

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   
    <h1>Fetch test</h1>
    <p>This is a paragraph.</p>
   
    <p id="demo">Fetch a file to change this text.</p>
   
    <p id="demo2">Fetch a file to change this text.</p>
   
    <button onclick="readfetch()">Fetch table</button>
   
    <script>
       
        function readfetch(){
            let file = "fetch_infojson.prg?postjsondata"
            var orequest = {};
   
                orequest[ "REQUEST1NAME" ] = "Daten einlesen";
                orequest[ "SORTING" ] = "KATEGORIE";
               
                orequest[ "REPORT_TYPE" ] = "GUV";
                orequest[ "REPORT_SORTING" ] = "EINNAHMEN" ;
               
                orequest[ "REPORT_VON" ] = "2022-01-01"    ;                                                                                  
                orequest[ "REPORT_BIS" ] = "2022-12-31"  ;        


            fetch (file,{
                method: 'POST',
                    headers: {
                      'Accept': 'application/json, text/plain, */*',
                      'Content-Type': 'application/json'
                    },
                    body: JSON.stringify( orequest )
                  }).then(x => x.text())
                    .then(y => document.getElementById("demo").innerHTML = y) ;
        }
       
        function readTextFile(file)
        {
            var rawFile = new XMLHttpRequest();
            rawFile.open("GET", file);
            rawFile.onreadystatechange = function ()
            {
                if(rawFile.readyState === 4)
                {
                    if(rawFile.status === 200 || rawFile.status == 0)
                    {
                        var allText = rawFile.responseText;
                        document.getElementById("demo2").innerHTML= allText;
                    }
                }
            }
            rawFile.send(null);
        }
       
      //  var file2 ="newfile.txt";
     //   readTextFile( file2 );
       
    </script>
   
</body>
</html>
       
ENDTEXT
       
return
//----------------------------------------------------------------------------//      
 






fetch_infojson.prg

Code: Select all  Expand view
function main
  local hValues
 
 
  AP_SetContentType( "application/json" )
 
 
  logline("start", time())
  logline("AP_Args",ValToChar( AP_Args() ) )
 
  hb_jsonDecode( AP_Body(), @hValues )
 
  logline("AP_Body", ValToChar( hValues ) )
 
  logline("REQUEST1NAME",hValues[ "REQUEST1NAME" ] )
  logline("SORTING",hValues[ "SORTING" ] )
 
  logline("REPORT_TYPE",hValues[ "REPORT_TYPE" ] )
  logline("REPORT_SORTING",hValues[ "REPORT_SORTING" ] )
 
  logline("REPORT_VON",hValues[ "REPORT_VON" ] )                                                                              
  logline("REPORT_BIS",hValues[ "REPORT_BIS" ] )
     
 
  ?? '<H1>Uhrzeit</H1>'
  ?? time()
 
  TEMPLATE  
 
  <!DOCTYPE html>
  <html>
 
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fetch test</title>
 
  <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/start/jquery-ui.min.css" rel="stylesheet">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.2.2/quartz/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <STYLE>
 
  h1 {
  font-weight: normal;
    letter-spacing: -1px;
      color: #34495E;
        }
 
  .rwd-table {
  background: #34495E;
    color: #fff;
      border-radius: .4em;
        overflow: hidden;
          width: 100%;
            tr {
  border-color: lighten(#34495E, 10%);
    }
  th, td {
  margin: .5em 1em;
    @media (min-width: $breakpoint-alpha) {
  padding: 1em !important;
  }
  }
  th, td:before {
  color: #dd5;
    }
  }
 
  </STYLE>
 
  </head>
 
  <div class="container">
  <h1>RWD List to Table</h1>
 
  <table id="productSizes" class="rwd-table">
  <thead>
  <tr class="d-flex">
  <th class="col-1">Size</th>
  <th class="col-3">Bust</th>
  <th class="col-3">Waist</th>
  <th class="col-5">Hips</th>
  </tr>
  </thead>
  <tbody>
  <tr class="d-flex">
  <td class="col-1">6</td>
  <td class="col-3">79 - 81</td>
  <td class="col-3">61 - 63</td>
  <td class="col-5">89 - 91</td>
  </tr>
  <tr class="d-flex">
  <td class="col-1">8</td>
  <td class="col-3">84 - 86</td>
  <td class="col-3">66 - 68</td>
  <td class="col-5">94 - 96</td>
  </tr>
  </tbody>
  </table>
 
  </div>
  </body>
  </html>
 
ENDTEXT  

return nil
//----------------------------------------------------------------------------//

function logline( cText, cWert )
 
  local cLog
  local cFile := ""
  local cPRGPATH := ""
 
  cPRGPATH := hb_GetEnv( "PRGPATH" )
  cPRGPATH := STRTRAN( cPRGPATH  ,"/","\")
 
  cFile := cPRGPATH + "
\log.log"
 
  cLog := memoread( cFile )
 
  if VALTYPE(cText) = "
U"
    cText := "
"
  endif
  if VALTYPE(cWert) = "
U"
    cWert := "
"
  endif
  cLog   +=  ALLTRIM( str(procline(1)) ) + "
   "  + PadR( cText, 40 ) + ":  " + cWert + CRLF
 
  MEMOWRIT( cFile, cLog, .f. )
 
return nil
//----------------------------------------------------------------------------//
********************************************************************
mod harbour - Vamos a la conquista de la Web
modharbour.org
https://www.facebook.com/groups/modharbour.club
********************************************************************
User avatar
Otto
 
Posts: 6332
Joined: Fri Oct 07, 2005 7:07 pm

Return to mod_harbour

Who is online

Users browsing this forum: No registered users and 4 guests