我正在创建一个应用程序,该应用程序在屏幕上显示单个图像,该图像存储在数据库中,并通过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是更好的选择吗?如果是的话,你能给我举个例子吗?
我现在已经设法找到了一种方法。我知道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");
如您所见,上面发送的数据如下:-funsionName:"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代码根据您发送的funsionName的以下数据识别条件:"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",也将知道post的当前id,并将其递增一以获得正确的mysqlpost。
这是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"funsionName:"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的bellow和echo'dout,以便上面显示的应用程序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!