AJAX功能从下拉列表中进行实时预览

我在通过AJAX配置数据的实时预览时遇到了一些问题。我设法用下面的代码得到了一个预览，但我有点卡在如何继续。我的下一步是显示从同一张表提供的图像URL。由于我对PHP和AJAX相当陌生（尤其是），我没有进一步了解这些代码。这是HTML的样子：AJAX功能从下拉列表中进行实时预览

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>

阿贾克斯/ 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>';

这是结果：

所有的反馈是非常感谢！亲切的问候

来源

2017-05-06 Moya

什么是你所面临的问题？ –

在你的情况下，PHP文件应该返回json对象，你可以在ajax成功回调中使用。从服务器返回json请参考Returning JSON from a PHP Script。在对象的示例代码的情况下是这样，

$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>"); 
    } 
    })

来源

2017-05-06 17:07:49

AJAX功能从下拉列表中进行实时预览

回答

相关问题