Question

我有一个PHP-Page，它返回一个JSON-List（枚举并且只包含最多~210的整数）。这个JSON-List应该由jQuery-Script处理。它应该搜索一些div，其id包含JSON中的数字，并用另一个替换它们的类。我该怎么做？

的index.php

＆＃13;

@charset "utf-8";
/* CSS Document */
body {
	font-family:Roboto, Arial, sans-serif;
}
#header {
	width: 100%;
	height: 2em;
	background-image: linear-gradient(white, #ddd);
	border-bottom: 1px solid black;
}
#headercontent {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	float: left;
}
#navleft {
	float: left;
	background-color: #EEE;
	width: 20%;
	height: 100%;
}
#filter {
	margin: 0.2em;
}
#container {
	float:left;
	background-color: red;
	width: 80%;
	height: 100%;
}

.imgthumbbox {
	float:left;
	width: 20%;
	min-width: 15em;
	background-color:#EEE;
	padding: 2px;
	border: 1px solid black;
	margin: 0.5em;
}
.hidden {
	float:left;
	width: 20%;
	min-width: 15em;
	background-color:#EEE;
	padding: 2px;
	border: 1px solid black;
	margin: 0.5em;
	display:none;
}
.imgbox {
	width: 100%;
	position: relative;
}
.imgbox:before {
	content: "";
	display: block;
	padding-top: 66.666%;
}
.imgcontainer {
	position:absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
img {
	height: 100%;
	width: auto;
}
#buttoncontainer {
	display:block;
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Titel -->
<title>AJAX-Test</title>
<!-- Stylesheet -->
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- AJAX -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    /* SCRIPT */
    function filter(cb){
		$.get("shownitems.php",
			{
				checkbox: cb //Send checkbox value (Value, not "checked") ??
			},
			function(data){
				//WHAT?
			}
		);
	}
});
</script>
</head>
<body>
	<?php
		include "functions.php";
		// VERBINDUNG AUFBAUEN
		$mysqli = new mysqli(/* CENSOR */);
		if (mysqli_connect_errno()) {
 		   printf("Ein Fehler ist aufgetreten.<br/>Senden Sie bitte folgenden Code an den Webmaster: %s\n", mysqli_connect_error());
    	exit();
	}
// DATENBANK AKTUALISIEREN
updatedb();
?>
<form action="generatezip.php" method="get"> <!-- GENERATEZIP IS'NT SCRIPTED ALREADY -->
<div id="header">
	<div id="headercontent">
		logo and stuff
	</div>
</div>
<div id="contentcontainer">
	<div id="navleft">
    	<h3>Filtern</h3> <!-- FILTER -->
		<div id="filter">
			<h4>Datum</h4> <!-- DATE -->
			<input type="checkbox" name="date" value="2015-06-25" id="d1" checked="checked" onclick='filter(this)'/>
				<label for="2015-06-25">1. Abend (25.06)</label><br /> <!-- THREE OF THESE - SHORTENED FOR SO -->
		</div>
		<div id="filter">
			<h4>Tanz/Programmtitel</h4>
			<input type="checkbox" name="track" value="1" id="t1" checked="checked" onclick='filter(this)'/>
				<label for="1">Titel 1 - "Wooden Arms"</label><br /> <!-- FOURTEEN OF THOSE - SHORTENED FOR SO -->

	</div>
	<div id="container"> <!-- EXAMPLE-BOX: THE RESULTS OF THE PHP-SCRIPT BELOW LOOK LIKE THIS -->
        <div id='3cont' class="imgthumbbox">
        	<div class="imgbox">
            	<div class="imgcontainer">
                	<img src="thumbs/_MG_6388.jpg" title="3" />
				</div>
			</div>
            Bild 3<br />
            <input name="imgselect" id="3sel" type='checkbox'/>
            <label for="3sel">Bild herunterladen</label>
        </div>
    <?php
	$result = $mysqli->query('SELECT id, name FROM `img`');
	while ($row = $result->fetch_object())
	{
		echo $row->id;
		echo $row->name;
		echo '<div id="'.$row->id.'cont" class="imgthumbbox">';
			echo "<div class='imgbox'>";
				echo '<div class="imgcontainer">';
					echo '<img src="thumbs/'.$row->name.'.jpg" title="'.$row->id.'" />';
				echo '</div>';
			echo '</div>';
			echo 'Bild '.$row->id.'<br/>';
			echo '<input name="imgselect" id="'.$row->id.'sel" type="checkbox"/>';
				echo '<label for="'.$row->id.'sel">Bild herunterladen</label>';
		echo '</div>';
	}
	?>
		<div name="buttoncontainer">
			<button type="submit">Herunterladen</button>
		</div>
	</div>
</div>
<!-- HOW TO USE THE SITE -->
<script type="text/javascript">
alert('Bitte wählen Sie die Bilder, die Sie herunterladen möchten, mit den Checkboxen an den Bildern aus. Drücken Sie dann auf "Herunterladen". Sie können die Bilder mit den Checkboxen in der linken Spalte filtern. Sie können ein Bild vergrößern, indem sie auf das Vorschaubild klicken.');
</script>
</form>

</body>
</html>

＆＃13;

shownitems.php

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Filter</title>

</head>

<body>
<?php
$mysqli = new mysqli(/* CENSORED */);
if (mysqli_connect_errno()) {
    printf("Ein Fehler ist aufgetreten.<br/>Senden Sie bitte folgenden Code an den Webmaster: %s\n", mysqli_connect_error());
    exit();
}
$cb = $GET_["id"];
$state = $GET_["state"];

if (strleng($cb)>2){
	$array = array();
	$request = "SELECT id FROM `img` WHERE `day` = '".$cb."'";
	$result = $mysqli->query($request);
	while($row = $result->fetch_row()){
		$array[] = $row[0];
	}
	$result->close;
	$json = json_encode($array);
	echo $json;
}
if (strleng($cb)<=2){
	$request = "SELECT * FROM `img` WHERE `track` = ".$cb;
	$result = $mysqli->query($request);
	while($row = $result->fetch_ro()){
		$array[] = $row[0];
	}
	$result->close;
	$json = json_encode($array);
	echo $json;
}
?>
</body>
</html>

＆＃13;

利奥

Answer 1

我想我可以回答＆＃34;我如何循环json＆＃34;问题，但这完全是太多的代码/不够具体。

function filter(cb){
    $.get("shownitems.php",
        {
            checkbox: cb //Send checkbox value (Value, not "checked") ??
        },
        function (data){
            // data is the json response from showitems.php
            // JSON is an array of objects, so you want to loop through
            // the array to access each object
            data.forEach(function (item) {
                console.log(item);
            });
        }
    );
}

编辑：我回顾我的回复，我认为解释一种更模块化的方法来提出get请求会更有帮助：

function callGet(endpoint, options) {
    var callback = options.hasOwnProperty('callback') ? options.callback : null;
    $.get(endpoint, options.data, callback);
}

称为：

var options = {
    data: {
        checkbox: cb
    },
    callback: function (res) {
        if (res && res.length > 0) {
            res.forEach(function (item) {
                console.log(item);
            });
        }
    }
}

callGet("shownitems.php", options);

甚至可以进一步包装：

function filter(cb) {
    var options = {
        data: {
            checkbox: cb
        },
        callback: function (res) {
            if (res && res.length > 0) {
                res.forEach(function (item) {
                    console.log(item);
                });
            }
        }
    }

    callGet("shownitems.php", options);
}

JQUERY循环通过json-list

1 个答案: