Jquery img src变量到php变量？

Question

How do i get my jquery variable in to a php variable, I've made a php document with jquery in it, after clicking the image the css will change and you will see a bigger image next to it. I need to have the image source of the big image in a php variable to get information about the image from the database.

Codes in the php file:

<div id="box-content">
     <?php
         $con=mysqli_connect("localhost","root","root","database");
         // Check connection
         if (mysqli_connect_errno()) {
             echo "Failed to connect to MySQL: " . mysqli_connect_error();
         }

         $result = mysqli_query($con,"SELECT * FROM image");
         while($row = mysqli_fetch_array($result)) {
             echo "<img src='". $row['url'] ."' class='media-image' />";
         }
         mysqli_close($con);
     ?>
</div>
<div id="image-info">
     <div id="image">
            <img src="" id="bigimage"/>
     </div>

Code in js file:

$(function () {
    "use strict";
    $('.media-image').click(function () {
        $(this).toggleClass('media-image-selected');
    });
    $('.media-image').click(function () {
        var src = $(this).attr('src');
        $('#bigimage').attr('src', src);
    });
});

Answer 1

If I understand your problem is that you want to show information from an image object from database on the fly.

In that case I think you have two option:

First option

In the server-side code when you build the page, you can query every possible information from the database about images. You should save these meta-data in data HTML attributes. In the client-side code in java script you can read and show these meta-data values. To read data attributes you can use .data() jQuery function In this case your page loading time will increase, due to the big query but the client don't have to wait more to load the information, because every data are on their client side.

Second option

You can do that with AJAX loading. You need php script which build the layout. You have to put some kind of identification for the images ie: ID from the database, doesn't matter, you will search the image by this value. To put these ids I recommend you the previously mentioned data attribute. After that you'll need a PHP interface which will do the selects from database. This script should read an image ID from GET parameter and based on that select the information about that image. Put the data in PHP array and after the select convert the PHP array into a JSON array and write out. Important: this script mustn't write out anything except the JSON array. In this interface script you should change the header into json data type with this code:

header('Content-type: application/json');

Finally you have to create a client side script on the layout which load the ID from the clicked image and call an AJAX load to the interface php. For the AJAX call I suggest th jQuery ajax function: http://api.jquery.com/jquery.ajax/

So in that case you have three components:

• layout builder (server side)
• database select interface (server side)
• ajax caller (client side)

The two server side script should definitely separated into two files.

This method, as you can see is more complex then the first one, but sometimes is more efficient.

Summary

The first method maybe will have a little bit longer page loading time, due to the database select. But a good sql code can be well optimized, so the query time can be measured in millisecs. In simple use-cases this is the best method.

The second one should be used when you want load or modify more complex data set on the fly.

I recommend you the first option.

Good luck!