Fatal编程技术网

Javascript 使用json显示图像

javascript php jquery html mysql

Javascript 使用json显示图像,javascript,php,jquery,html,mysql,Javascript,Php,Jquery,Html,Mysql,所有的工作都是从mysql获取图像src，移动到js文件直到html工作正常，但我想知道，（pic）选择器为什么不在页面上显示我的图像。 这是我的php文件，它从mysql数据库中获取与所选标记相关的所有图像 //这是javascript文件 $（'#detailsPage'）.live（'pageshow'，函数（事件）{ var id=getUrlVars（）[“L_id”]； $.getJSON（serviceURL+'getmarker.php？L_ID='+ID，displayim

所有的工作都是从mysql获取图像src，移动到js文件直到html工作正常，但我想知道，（pic）选择器为什么不在页面上显示我的图像。

这是我的php文件，它从mysql数据库中获取与所选标记相关的所有图像


//这是javascript文件
$（'#detailsPage'）.live（'pageshow'，函数（事件）{
var id=getUrlVars（）[“L_id”]；
$.getJSON（serviceURL+'getmarker.php？L_ID='+ID，displayimgs）；
});
功能显示IMG（数据）{
var imgs=data.pics；
控制台日志（imgs）；
$（'#pic'）。附加（''）；
$（“#操作列表”）.listview（“刷新”）；
}
函数getUrlVars（）{
var vars=[]，
搞砸
var hashes=window.location.href.slice（window.location.href.indexOf（'？'）+1）.split（'&'）；
for（var i=0；i


问题是
）
您试图通过
pic
获取元素并插入文本，这是不正确的


这将为您完成工作，使用innerHTML
（javascript）或
.html（）
（jQuery）
在该分区中插入img标记，即使我更改了它，imgs.img也不会在浏览器@mohdasimuhail
console.log（imgs）中获取对象（src）
imgs
变量是一个数组，您应该迭代
imgs
数组以附加到div中。
for（var j=0；j'）；}很高兴能帮助你，如果你对答案感到满意，那么你可以投票并接受答案，以帮助其他面临相同问题的人。：）

    <?php
    $dbhost = '127.0.0.1';
    $dbuser = 'root';
    $dbpass = '';
    $dbname = 'maalem';


    $sql2 = "SELECT img FROM image WHERE L_ID=:id";
    try {
        $con = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);  
        $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $con->query('SET NAMES utf8');
        $stmt = $con->prepare($sql2);  
        $stmt->bindParam("id", $_GET["L_ID"]);
        $stmt->execute();
        $img = $stmt->fetchAll(PDO::FETCH_OBJ); 
        $con = null;
        echo '{"pics":'. json_encode($img) .'}'; 
        } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    }
    ?>

//this is the javascript file 



    $('#detailsPage').live('pageshow', function (event) {
    var id = getUrlVars()["L_ID"];
    $.getJSON(serviceURL + 'getmarker.php?L_ID=' + id, displayimg);
    });


    function displayimg(data) {
     var imgs = data.pics;
     console.log(imgs);
    $('#pic').append('<img src="' + imgs.img + '"width=160 height=160/>');

    $('#actionList').listview('refresh');

     }


    function getUrlVars() {
    var vars = [],
    hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
     }

//HTML file 

   <!DOCTYPE HTML>
   <html>
    <head>
    </head>

    <body>

        <div id="detailsPage" data-role="page" data-add-back-btn="true">

            <div data-role="header">
                <h1 id="Name"></h1>
            </div>

            <div data-role="content"> 


                <div id="markerDetails">
                    <h2> الوصف </h2>
                    <p id="Dec"></p>
                    <div id="pic"></div>
                </div>



            </div>

        </div>

    </body>