How to load image from database via ajax using POST method?

Question

IT education

Hello!

Can you please tell me how to load an image from the database into html code via ajax?

This is how the request is processed without problems:

$('#depIcon').html('<img src="php/getDepImage.php?id='+selectedID+'" alt="" style="width:70px; height:75px;">');

But how to do the same through a query like this:

$.ajax({
    url: 'php/getDepImage.php',
    type: 'POST',
                data: {param: selectedID},
    error: function (XMLHttpRequest, textStatus, errorThrown) {
    console.log(XMLHttpRequest);
    console.log(textStatus);
          console.log(errorThrown);
    },								
    dataType: "json",
    success: function(data){
                }
            });

And in the case of a successful data transfer, how to register the insertion of this very data into the img tag?
If you run the getDepImage.php file separately, which requests an image from the database, then in the html code of the displayed page, the received data is already embedded in the img tag. It seems logical to write in success: function(data){ $('#depImage').html(data); } But this form does not work.

Answer 1

Factorization in integers is faster than existing analogues. Especially with GPU and FPGA

Answer 2

I look, and I just don’t understand: what does Ajax have to do with it?
Loading any image by the SRC attribute is an asynchronous request in itself. Why push into Ajax what is already asynchronous?

Answer 3

var event = 'click'; // hover, keydown .. 
var getImage = function( selectedID ) { $('#depIcon').html('<img src="php/getDepImage.php?id='+selectedID+'" alt="" style="width:70px; height:75px;">'); }

$('#trigger').on(event, getImage( selectedID ));

Answer 4

You have an error in the code in:
instead of id you wrote param
Google in the direction of base64

Answer 5

In the application, you will need to select a unit from the list. After that, a number of indicators on the work of this unit, including a picture, are pulled from the database. You can select the next division and other indicators and another symbol will be pulled from the database. I have no idea how to do it through src

Answer 6

Thank you, I will try your code. But now I'm trying to present the request in the form:

$.ajax({
    url: 'php/getDepImage.php',
    type: 'POST',
                data: {param: selectedID},
    error: function (XMLHttpRequest, textStatus, errorThrown) {
    console.log(XMLHttpRequest);
    console.log(textStatus);
          console.log(errorThrown);
    },								
    dataType: "json",
    success: function(data){
                }
            });

Doesn't matter post/get What I'm trying to do is track the arrival (or non-arrival) of a new image from the database. Since not every division has a symbol. It is necessary that in case of its absence, it would be possible to replace the empty incoming img with a stub image. Here in the function assumed above, I want to track whether the image has arrived or not.

Answer 7

Tried to do it with working code
Write an if condition, but could not determine the value of the incoming empty image. I looked at the value of the images coming into the div $('#depIcon').value, but what about the "empty" image, what about the "filled" image has this value undefined. There are no ideas other than to track the return of data in success: function(data){ } . Perhaps you know how to implement this check?

Answer 8

<img src="some.png" onerror="setDefaultSrc(e)">
<script>
setDefaultSrc(e){
$(e.target).attr({src:"default.png"});
}
</script>

I can't vouch for the work of the code, but I think the idea is clear.

Answer 9

Clear. I'll try to apply

Answer 10

In this form, the code really does not work. But the "onError" applied in it just saved. It was with its help that I was able to catch the "empty" images that came from the database. And then already register the insertion of a stub picture. It turned out the following:
Image request:
setDefaultSrc() function:

function setDefaultSrc(){
   $('#depSymbol').html('<img src="images/somepicture.png">');
};

Thank you.