Question

我是Ajax的新手，刚刚开始使用PHP，我已经使用PHP工作，但是重新加载页面，正如人们所期望的那样。

当我按下按钮时，它会根据单击的按钮插入查询。 php代码在同一个文件中，没有实现Ajax代码，因为我无法弄清楚如何。

这些按钮的形式没有任何操作和方法POST，

<button type="submit" name="btnName" id="btnName" class="btn btn-success hidden-xs hidden-sm"></span>Name</button>

我有五个，有不同的ID。

这是使用的PHP代码，

if(isset($_POST['btnName'])){
    $sqlName = sprintf("INSERT INTO `PersonSong`(`Person_Id`, `Song_Id`) VALUES (1,%s)",mysql_real_escape_string($addressId));
    $sqlNameQ = mysql_query($sqlName);
    if($sqlNameQ){
        echo "Added";
    }else {
        echo "You already know this!";
    }
}

其中也有五个。

当“添加”此查询时，如果此人知道该歌曲，则会显示页面底部的图标，

    <?php 
    $sqlPersonSong = mysql_query("SELECT Person.Name AS PersonName, PersonSong.Person_Id AS PersonID, PersonSong.Song_Id AS SongID, Person.Facebook_Id AS FacebookID FROM PersonSong INNER JOIN Person ON PersonSong.Person_Id=Person.Person_Id WHERE PersonSong.Song_Id ='".$rows['SongId']."'"); ?>
    <div class="hidden-xs hidden-sm">
        <?php 
        $numRows = 1;
        while($rowFacebookImg = mysql_fetch_array($sqlPersonSong)) { ?>
        <a href="#">
            <img class="circleImage img-circle" alt="Brand" src="http://graph.facebook.com/<?php print $rowFacebookImg['FacebookID'] ?>/picture?type=square&width=200&height=200" 
            data-toggle='tooltip' data-placement='top' title='<?php print $rowFacebookImg['PersonName'] ?>'>
        </a>
        <?php } ?>
    </div>
</td>

如何在不重新加载页面的情况下更新底部的图像？谢谢。

Answer 1

是的，使用jQuery很容易

$.get("myUrl/to/getImages?parameter=value", function(returnData)
{
    var myImageUrl = returnData.myImageUrl;
    //Set to an image
    $("#myImgID").attr("src", myImageUrl);
});

您的网址应该回显（仅）这样的内容：

header('Content-Type: application/json');
echo "{\"myImageUrl\":" . $myImageUrl . "}";

使用Ajax和PHP插入和更新页面而无需重新加载

1 个答案: