0

私は Jquery/Ajax/JSON を初めて使用し、ユーザーが 2 つのアイコンのいずれかをクリックすると、mysql の値を変更するスクリプトを作成したいと考えています。

私はアイデアを探しましたが、どこから始めればよいのか正確にはわかりません。私はスリムでsmartyを使用しており、すでにデータテーブルを含むページをセットアップしていますが、これはうまく機能しています。

私はデータテーブルの行 2 アイコンを作成しました。ユーザーが 2 つのアイコンのいずれかをクリックすると、ページを離れずに値が更新される可能性がある場合に必要なものです。削除済みとしてマークするために index.php/upd/del/1 のような aa href を追加し、保存するために index.php/upd/save/1 を追加しました。

upd の背後には、save または del を読み取る機能があり、1 がアイデアです。

誰かが私にこのようなものを見つけることができるアイデアや場所を教えてもらえますか.

ここで質問できることを願っています。これで私を助けてくれてありがとう

4

1 に答える 1

1 
<a id="option1"><img src="image1.jpg" /></a>
<a id="option2"><img src="image2.jpg" /></a>

<script type="text/JavaScript">
$(function() {
    $("#option1").click(function() {
        $.post("index.php/upd/del/1", function(json) {
                if (json && json.status) {
                    alert("Change made!");
                } else {
                    alert("something failed!");
                }
            }
        );
    });
    $("#option2").click(function() {
        $.post("index.php/upd/save/1", function(json) {
                if (json && json.status) {
                    alert("Change made!");
                } else {
                    alert("something failed!");
                }
            }
        );
    });
});
</script>

次に、PHP スクリプトで次のようにします。

<?php
// In order for jquery to change the data we are returning to json, we should se the headers to json. 
// Also, it is important to notice that all the ajax request will work allways with utf-8
// so if you don't want to have a lot of problems with accents and special chars, use allways utf-8
header("Content-Type:application/json; Charset=utf-8");

// Make some really cool stuff with the data at mysql
// But if something went wrong:
if ($varToSetIfErrorOcurrs === true) {
    return json_encode(array ("status" => false));
}

return json_encode(array ("status" => true));

最後の考慮事項:

  • 常に html 要素を使用して、イメージを表示します。画像をクリックするのではなく、画像を表示します。a (アンカー) をクリックしてそれらをクリックします。またはいくつかのアクションを行うためのボタン
  • JS はページの下部に配置することをお勧めします。そのため、実行時にすべての DOM が既に読み込まれています。
  • $(関数() {}); DOM の準備ができたら、そのコードを実行します (画像を含むすべてが読み込まれると、html の document.onready のみが実行されるため、処理が遅くなります)。

ハッピーコーディング！

于 2013-03-08T20:20:35.630 に答える