数据库

Question

我想通过循环数据库图像来获取旋转木马的图像。在js中，我设法将所有图像名称循环到home.js中，但是，我不确定我怎么想在HTML中显示它？我的HTML代码只设法获取最新的图像并在旋转木马中显示一次。我的第2和第3个旋转木马没有任何显示。我的主要目的是获取数据库中可用的图像并将其显示在轮播中

我想使用append或attr？当我使用追加时，我没有得到任何图像。我在我的其他JS文件中声明了webserverURL。

$("#imgEventPicture").append("src", webserverURL() + "/images/" + event_Img + "_s");

$("#imgEventPicture").attr("src", webserverURL() + "/images/" + event_Img + "_s");

home.html的

＆＃13;

＆＃13;

    <div class="container">
                        <h2>Upcoming Event</h2>
                        <div id="Sideusername"></div>



                        <div id="myCarousel" class="carousel slide" data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                <li data-target="#myCarousel" data-slide-to="1"></li>
                                <li data-target="#myCarousel" data-slide-to="2"></li>
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">

                                <div class="item active">
                                    <!--<img src="images/halloween.jpg" alt="Los Angeles" style="width:100%;">-->
                                    <img id="imgEventPicture" height="100">
                                </div>

                                <div class="item">
                                    <!--<img src="images/familyday.jpg" alt="Chicago" style="width:100%;">-->
                                    <img id="imgEventPicture" height="100">
                                </div>
                                


                            </div>

                            <!-- Left and right controls -->
                            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>

＆＃13;

＆＃13;

＆＃13;

home.js

＆＃13;

＆＃13;

//Profile Section
    function getEvent() {
        var url = serverURL() + "/getevent.php";
        

        var JSONObject = {
            "user_name": localStorage.getItem("userid"),
          
        };

        
        $.ajax({
            url: url,
            type: 'GET',
            data: JSONObject,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (arr) {
                _getEventResult(arr);
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
                alert(error);
                validationMsg();
            }
        });
    }
    

    function _getEventResult(arr) {
       
        for (var i = 0; i < arr.length; i++) {
            event_id = arr[i].event_id;

            event_Img = arr[i].event_Img;
            event_title = arr[i].event_title;
            event_description = arr[i].event_description;
            event_date = arr[i].event_date;
            event_time = arr[i].event_time;
            event_location = arr[i].event_location;
            staff_ID = arr[i].staff_ID;


            console.log("event_id>>" + event_id);
            console.log("event_Img>>" + event_Img);
           
            
           // $("#imgEventPicture").append("src", webserverURL() + "/images/" + event_Img + "_s");
         $("#imgEventPicture").attr("src", webserverURL() + "/images/" + event_Img + "_s");
            alert("event_Img" + event_Img);
        }
    }

＆＃13;

＆＃13;

＆＃13;

getevent.php

＆＃13;

＆＃13;

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
header("Content-Type: application/json; charset=UTF-8");

include("global.php");

$conn = new mysqli(server, dbuser, dbpw, db);
$event_id = $_GET['event_id'];

//$result = $conn->query("select * from Event where event_id = '" . $event_id . "'");
$result = $conn->query("select * from Event ");

$outp = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
	if ($outp != "[") {$outp .= ",";}
	$outp .= '{"event_id":"'  . $rs["event_id"] . '",';
	$outp .= '"event_Img":"'   . $rs["event_Img"]  . '"}';
}
$outp .="]";

$conn->close();

echo($outp);
?>

＆＃13;

＆＃13;

＆＃13;