0

データベースに保存され、ajaxを介してphpスクリプトを介して取得される単一の画像を画面に表示するアプリを作成しています。

データベースから次の画像を取得するには、次のボタンと前のボタンを作成する必要があり、前のボタンの場合はその逆です。

問題は、データベースに保存されている画像の現在の ID を知る必要があるため、ID を使用してカウントをインクリメントまたはデクリメントして、データベースにクエリを実行するときに次または前の画像を取得できるようにすることです。

私が知りたいのは、私のjqueryアプリが写真の現在のIDをどのように知っているかということです. 画像を表示するために使用されるhtmlコードとともに、ajaxが追加の変数を送信する方法はありますか?

私の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 に関しては、最も文書化された言語ではないことを理解しています。

私は 1 週間前にこの問題を解決しましたが、ここで質問が開かれていたことを思い出し、同じ問題に直面している誰かを助けるために回答する必要があると考えました.

ここに行きます。

まず、アプリをロードすると、php/mysql からデータを受信して​​最新の画像を開く必要があります。

したがって、次の div と、apps html 内の 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");

ご覧のとおり、上記は次のデータを送信します。後で、次/前のデータベース データを取得します。

これは、上で指定された次の 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 も認識し、それを 1 つ増やして正しい mysql 投稿を取得します。

これがphpです： -

$_dataId= $_POST['dataId']; //ページ ID が取得され、以下の 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 に答える