Javascript Settings Cookie background PHP gets a cookie and reads a picture that was clicked on the front end

Recently need a little demo, front-end page through JavaScript settings cookie, background page through the cookie read cookie and on another page output in the front-end click on the picture.

Specific implementation methods:

Ody>
<div style= "Text-align:center" >
<H2 id= "H2" > Picture info <div id= "Showpic" >

</div>


</div>
</body>

Normal HTML code

var cookie_str = ';
var pic = new Array ();
Window.onload=function ()
{

Ajax returns the background data to the front end of the value
var xmlhttp;
XMLHTTP = new XMLHttpRequest ();

Xmlhttp.onreadystatechange=function ()
{
if (xmlhttp.readystate==4 &&xmlhttp.status==200)
{

Console.log ("Ajax Success");
var obj = json.parse (xmlhttp.responsetext);

for (var i = 0;i<obj.length;i++)
{
Pic.push (Obj[i].picname);
Console.log (Obj[i].picname)
}
Drawing HTML code on the front page
var html = " ';
for (var i = 1;i <pic.length;i++)
{
HTML + = "<br/>";
HTML + = " ';
}
document.getElementById ("Showpic"). innerhtml=html;

Alert (obj)
Alert ("Success");
}
}
Xmlhttp.open ("GET", "admin.php", true);
Xmlhttp.send ();
}
function Submit1 ()
{

$ ("img"). Click (function () {
$STR = $ (this). attr (' src ');//The URL of the picture in the dot
Console.log ($STR);
Cookie_str + = "+ $str;
Console.log (COOKIE_STR);
Alert (COOKIE_STR)
alert ($STR);
Setcookie (' url ', cookie_str,1);
});
}
Set cookies
function Setcookie (c_name,value,expiredays)
{
var exdate = new Array ();
Exdate=new Date ();
Exdate.setdate (Exdate.getdate () +expiredays);
document.cookie=c_name+ "=" +escape (value) +
((expiredays==null)? "": "; expires=" +exdate.togmtstring ())
}

JavaScript code

First read the URL of the image through the Ajax backend database, and then use innerHTML to draw an IMG on the front-end page, it is recommended to use jquery, because jquery is easier to get objects, set the properties of the object is easier.

Adding an onclick event to each IMG is used to set the cookie, where attr () in jquery is used to get the src of the clicked IMG, but there is a bug when clicking on multiple img Cookie_str + = "+ $str;

Out of the content or rerun the previous OnClick method. Here I use the background page to delete the duplicate data. Of course the front end can also be set. Then call Setcookie Set cookie three parameters are cookie name

Cookie value The time of the cookie. Here's a better solution. Via src jquery in the jquery.cookie.js file directly. Cookies allow you to set cookies.

cookie.php

<?php

$url = Trim ($_cookie[' url ');

echo $url;

$arr 1 = Explode ("', $url);

Var_dump ($arr 1);

$arr 2 = Array_unique ($arr 1);

$NEWARR =array_map (function ($v) {return array (' name ' = = $v);}, $arr 1);

echo Json_encode ($NEWARR);

?>

The background PHP code is split into arrays by removing spaces to remove duplicate elements (out of a two-tuple array) in JSON format encoded output

Show.html

Window.onload=function ()
{
var pic = new Array ();
var xmlhttp;
XMLHTTP = new XMLHttpRequest ();

Xmlhttp.onreadystatechange=function ()
{
if (xmlhttp.readystate==4 &&xmlhttp.status==200)
{
var obj = json.parse (xmlhttp.responsetext);
Console.log (pic);
for (var i = 0;i<obj.length;i++)
{
Console.log (Obj[i].name)
Pic.push (Obj[i].name);

}
Drawing HTML code on the front page
var html = " ';
for (var i = 1;i <pic.length;i++)
{
HTML + = "<br/>";
HTML + = " ';
}
document.getElementById ("Showpic"). innerhtml=html;
}
}
Xmlhttp.open ("GET", "cookie.php", true);
Xmlhttp.send ();
}

Front-end display code

Get data from the background via Ajax

Write code using innerHTML

This little demo is almost complete here. If you can solve the problem in the front-end is perfect.

Javascript Settings Cookie background PHP gets a cookie and reads a picture that was clicked on the front end