javascript — предварительный просмотр функции AJAX из выпадающего списка
У меня возникли небольшие проблемы с настройкой предварительного просмотра данных через AJAX. Мне удалось получить предварительный просмотр с помощью следующего кода, но я немного застрял в том, как продолжить. Мой следующий шаг — отображение URL-адреса изображения из той же таблицы. Так как я довольно новичок в PHP и AJAX (особенно), я не буду продвигаться дальше с этим кодом. Вот как выглядит HTML:
Логика PHP:
$query = $conn->prepare("SELECT * FROM items WHERE user_id = $userID");
$query->execute();
Форма HTML:
<div class="form-group">
<div id="results"></div>
<form action="" method="post">
<label for="sel1">Selecteer uw items:</label>
<select class="form-control" id="sel1"multiple>
<?php
while ($q = $query->fetch()){
echo '<option value="' . $q['id'] . '">' . $q['Beschrijving']
. '</option>';
}
?>
</select>
<button type="button" class="btn btn-success" name="submit">Toevoegen
aan board</button>
</form>
</div>
Скрипт Ajax / JS:
<script type="text/javascript">
$("#sel1").on("change", function(){
function clearpost(){
$("#results").val("");
}
var selected = $(this).val();
makeAjaxRequest(selected);
function makeAjaxRequest(opts){
$.ajax({
type:"POST",
data:{opts: opts},
url:"views/itemOverview.php",
success:function(res){
$("#results").html("<p>Uw items : " + res + "</p>");
}
})
}
})
</script>
Файл PHP:
echo '<pre>';
print_r($_POST);
echo '</pre>';
Это результат:
Все отзывы очень ценятся!
С уважением
Решение
В вашем случае файл PHP должен возвращать объект json, который вы можете использовать при обратном вызове ajax success. Пожалуйста, обратитесь Возвращение JSON из PHP-скрипта от возвращения JSON с сервера. в случае объекта пример кода выглядит так:
$res = new stdClass();
$res->name = "sample"; // from db
$res->imageUrl = "img/img1.png";// from db
echo json_encode($res);
В вашем файле JS вы можете сделать что-то вроде,
$.ajax({
type:"POST",
data:{opts: opts},
url:"views/itemOverview.php",
datatype: "text/json", // this is preferred when receiving json data
success:function(res){
// res is json object. res.name & res.imageUrl are it's property
$("#results").html("<p>Uw items : " + res.name + " <img src='"+ res.imageUrl+"' /></p>");
}
})
Другие решения
Других решений пока нет …
detector