IMG SRC json.parse results need cleaned up

Question

I am using an old script I had from a previous project. I wanted to try it out before making an attempt to just do it via fetch. I thought i would get lucky! I am still new to XMLHTTPRequest and fetch and is another reason I just wanted to try and figure it out using the old script first.

Anyway, when the page loads status is 200 for banners.php page. My Response Preview however has the URL with added characters ...

https: \ / \ /www.f-cdn.com \ /assets \ /img \ /fl-logo-c555380d.svg

The image is not displaying on the page. I just see the box for it. However the console is giving me a 404 status telling me that the javascript is undefined. But I believe it is defined. This is line 137

document.getElementById("goldads").innerHTML =('<IMG SRC="'+src+'" border=1 width="300" height="45"><\/a>');

Console

oneArrayItem http://...game.js:137:11
bannerOne/xmlhttp.onreadystatechange http://...game.js:140:1
(Async: EventHandlerNonNull) bannerOne http://...game.js:121:1
<anonymous> http://...game.js:87:1

The url for the image is suppose to be https://www.f-cdn.com/assets/img/fl-logo-c555380d.svg I'm using that image as a test. It's just some image I picked the matches the size image I was looking for.

myscript.js

function bannerOne() {
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
var jsonData = JSON.parse(xmlhttp.responseText) // json.parse returns array
    {
        var img = document.createElement('img'); // element to hold image
//      var img = document.createElement('goldBanner'); // element to hold image

        console.log(jsonData);
function oneArrayItem() {
  var firstArrayItem = jsonData[0];{  // banner_link , banner_image_url
    link =(firstArrayItem.banner_link);      // link is not yet defined in database
    src =(firstArrayItem.banner_image_url);
//  document.getElementById("goldads").innerHTML =('<a target="_blank" href="'+link+'"><IMG SRC="..//upload/'+src+'" border=1 width="300" height="45"><\/a>');
//  document.getElementById("goldads").innerHTML =('<a target="_blank" href="'+link+'"><IMG SRC="'+src+'" border=1 width="300" height="45"><\/a>');
    document.getElementById("goldads").innerHTML =('<IMG SRC="'+src+'" border=1 width="300" height="45"><\/a>');    
  }
}
oneArrayItem()
                                                 }
      }
  }
xmlhttp.open("GET","../php/goldbanners/banners.php",true);
xmlhttp.send();
}

bannerOne()

Before I try and change it to fetch can you tell me where the error is in this code so I understand it better?

mypage.html

<td><div  id="goldads"></div></td>

banners.php

<?php 
session_start();
if(empty($_SESSION['userid']))
{
    header("Location: ../login/index.php");
}
include('../../login/database.php');

if (isset($_SESSION['userid'])) {

try {
$db = DB();

$stmt = $db->prepare("SELECT gold FROM usersystem ORDER BY RAND() LIMIT 1");
//$stmt->execute([$userid]);
$stmt->execute();
$goldBanner = $stmt->fetchColumn(); 

}
catch(PDOException $e)
{
    $pdo = null;  /*** close the database connection ***/
    echo $e->getMessage();  
}

echo json_encode($goldBanner);

}
// unexpected end of file error !!! Fix it
?>

On the php side, `stripslashes()` would do the trick but it's not clear where that would need to be put. The javascript equivalent is described [here](https://locutus.io/php/strings/stripslashes/). — Ouroborus, Nov 27 '20 at 06:45
Okay I used echo json_encode($goldBanner, JSON_UNESCAPED_SLASHES); Thank you for helping with the slashes. I am still getting an undefined error status 400 for img. I need to revisit var img. — Ed Nolan, Nov 27 '20 at 13:10

IMG SRC json.parse results need cleaned up

0 Answers0