0

我正在创建一个在屏幕上显示单个图像的应用程序，该图像存储在数据库中，并通过 ajax 的 php 脚本检索。

我需要创建一个下一个和上一个按钮来从数据库中获取下一张图片，反之亦然。

问题是，您需要知道存储在数据库中的图片的当前 id，以便您可以在查询数据库时使用该 id 并递增或递减它来获取下一张或上一张图片。

我想知道的是，我的jquery应用如何知道图片的当前id？ajax 有没有办法发送一个附加变量以及用于显示图像的 html 代码？

在我的 jqm 中，我有以下代码显示 ajax 内容（图像）：

<div id= "collmiddle" >Image Container</div>

在同一个文件中，我有以下从 php 检索图像的脚本：

$.ajax (
{           
    url : "http://ukgn.co.uk/phonegap/saifApp.php, 
    complete : function (xhr, result)
    {
    if (result != "success") return;
        var response = xhr.responseText; 
            $("#collmiddle").html (response);
        }
    });

目前 php 文件将其发送回我的应用程序：

// sql query to retrieve the latest picture from database

echo "<img src=\"image.png\">";

上面的图片通过ajax成功加载后，替换了上面div中的文字“Image Container”。

现在我希望能够通过“下一个/上一个按钮”完成上述所有操作，因此当页面加载第一张图像时，图像的 id 也必须加载并存储在应用程序中，以便它可以单击“下一个”或“上一个”按钮时传递给 php 脚本，这反过来又应该用新图像更新图像，并将图像 id 变量替换为新的图像 id 变量。

到目前为止，我已经设法通过执行以下操作找到一种发送变量的方法：

var current_comments_count = 2;
$.ajax (
{ 
    url : "http://ukgn.co.uk/phonegap/saifApp.php?limit_start="+current_comments_count,

上述方法将数字添加到url；但是，我不确定如何检索变量。JSON在这里是更好的选择吗？如果是这样，你能告诉我一个工作的例子吗？

4

1 回答 1

0

我现在已经设法找到了一种方法。我知道 jquerymobile 不是最有据可查的语言，尤其是对于 phonegap。

我一周前解决了这个问题，但记得我在这里有一个问题，我认为我应该做出回应，以帮助面临同样问题的人。

就这样吧。

首先，当您加载应用程序时，它应该通过接收来自 php/mysql 的数据来打开最新的图片。

因此，您将在应用程序 html 中拥有以下 div 以及 2 个按钮：-

<!-- bellow div loads the dynamic data from the data base through a successful ajax call-->
<div id= "collmiddle" >Video Container</div>

        <br><br>
<!-- button 1 bellow is the previouse button-->
        <a href="index.html" data-role="button" data-inline="true" data-theme="b" id=Previouse style="width: 45%">Previouse</a>

<!-- button 2 bellow is the next button-->
        <a href="index.html" data-role="button" data-inline="true" data-theme="a" id=Next style="width: 45%">Next</a>

然后通过调用此 javascript ajax 请求由应用程序打开时收到的数据填充：-

var dataId; //this will store the mysql id of the image so we can use it to determine the next/previouse posts.

$.post("http://yourwebsite.com/saifApp.php", { funcionName: "Latest", pageCount: "dataId" },
           function(data){
             dataId= data.id; //this is the current id where this data is located within the database and can now be used to determine next/previouse posts.

             $("#collmiddle").html (data.b); //this is the picture html code e.g <img src="blah.jpg"> and will be inserted inside "<div id= "collmiddle" >Video Container</div>"
           }, "json");

如您所见，上面发送了以下数据： - funcionName: "Latest", pageCount: "Latest" //我们现在实际上并不需要 pagecount，但我还是添加了它。我们稍后将获取下一个/上一个数据库数据。

然后，它会被位于上面指定的以下 url 中的 php 拾取，并再次如下所示：-

http://yourwebsite.com/saifApp.php "

这是php代码： -

if($_POST['funcionName']=="Latest")
{
            $sqlCommand = "SELECT * FROM images";
            $query = mysqli_query($myConnection, $sqlCommand) or die (mysqli_error());
            if($row=mysqli_fetch_array($query))
            { 
                $imgEmbedCode = $row["embedcode"];
                $dataId= $row["id"];

                mysqli_free_result($query); 
            }

}

如您所见，php 代码根据您发送 funcionName: "Latest" 的以下数据识别条件，并从数据库中获取适当的数据。完成此操作后，它会将其输出为 json 格式以返回到您的应用程序：-

$arr = array(
'title' => "<center><h2>".$title."</h2></center>", 
'b' =>"<div style=\"margin: 0 auto;\">".$imgEmbedCode."</div>", 
'id' => $dataId
);

echo json_encode($arr); //this line is important to ensure php converts the above code into correctly formated json.

现在，如果用户在您的应用程序中单击“下一步”按钮，则应从您的应用程序调用以下 javascript 代码：-

$("#Next").bind ("click", function (event)
        {

$.post("http://yourwebsite.com/saifApp.php", { funcionName: "nextPage", pageCount: dataId},
               function(data){
                dataId= data.id; //the database id of the new img.
                 $("#collmiddle").html (data.b);//data is printed inside the <div id= "collmiddle" >Video Container</div>
               }, "json");
        });

从上面你可以看到我们传递了以下变量： -

funcionName: "nextPage", pageCount: dataId

所以现在我们的 php 将知道调用函数“nextPage”，并且还将知道帖子的当前 id 并将其加一以获得正确的 mysql 帖子。

这是php： -

$_dataId= $_POST['dataId']; //pageid 被提取并将在下面的 mysql 查询中使用：-

if($_POST['funcionName']=="nextPage") 
{
    $_dataId++; //increase the count by 1 to get the next picture inside the database
    $sqlCommand = "SELECT * FROM images WHERE id='$_dataId' LIMIT 1";
            $query = mysqli_query($myConnection, $sqlCommand) or die (mysqli_error());
            if($row=mysqli_fetch_array($query))
            { 
                $imgEmbedCode = $row["embedcode"];
                $dataId= $row["id"];
                mysqli_free_result($query); 
            }
}

从上面可以看出，php从下面的json "funcionName: "nextPage"" 中识别数据并调用相应的方法。它还获取通过以下 json "pageCount: dataId" 发送的页数，然后将其分配给一个变量：-

$_dataId= $_POST['pageCount'];

然后将其递增以用作下一篇文章的指标：-

$_dataId++;

然后应用查询并检索适当的信息。

  $sqlCommand = "SELECT * FROM images WHERE id='$_dataId' LIMIT 1";
                $query = mysqli_query($myConnection, $sqlCommand) or die (mysqli_error());
                if($row=mysqli_fetch_array($query))
                { 
                    $imgEmbedCode = $row["embedcode"];
                    $dataId= $row["id"];
                    mysqli_free_result($query); 
                }

同样，数据被格式化为 json，如下所示并回显，以便上面显示的应用程序 ajax 调用检索数据：-

$arr = array(
'title' => "<center><h2>".$title."</h2></center>", 
'b' =>"<div style=\"margin: 0 auto;\">".$imgEmbedCode."</div>", 
'id' => $dataId
);
echo json_encode($arr); //again this is very important!
于 2013-08-09T17:13:41.250 回答