1

私はAjaxスクリプトの初心者で、ユーザーがリンクをクリックしたときにMysqlクエリの結果を表示するスクリプトを作成しようとしています。Ajaxスクリプトを呼び出すonClick（）関数を使用することを考えました。これが私のコードです：

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="/course/format/topics/ajax.js" type="text/javascript"></script>
<div id="stitre">
    <a href="#" onclick="display()" id="link1" class="link"> Link 1</a>
</div>
<div id="one"> </div>
<div id="stitre">
    <a href="#" onclick="display()" id="link2" class="link"> Link 2</a>
</div>
<div id="one"> </div>

私のajax.jsコード：

$(document).ready(function() { 
for (var i=1; i<3; i++) {
    var id = document.getElementById("#link" + i);
    function display() {
        $.ajax({
            async: false,
            type: "POST",
            url: "myphp.php",
            data: "id=" + id,
            dataType: "json",
            success: function(msg) {
                if(msg.success) {
            $("#one").html(msg);
                } else {
                    alert("error");
                }
            }
        });
    };
}
});

そして最後に、myphp.php：

<?php
    require_once('config.php');
    mysql_connect($CFG->dbhost, $CFG->dbuser, $CFG->dbpass);
    mysql_select_db($CFG->dbname);
    mysql_query("SET NAMES 'utf8'");

    $id = $_GET['id'];
    if($return = display($id)) {
        echo "success";
    } else {
        echo "error";
    }
    echo json_encode($reply);
?>

今のところ、リンクをクリックしても何も表示されません。

4

4 に答える 4

1

多くの問題があります。

  1. インラインイベントハンドラー（onclick="display()"）が不良です。jQueryは、イベントハンドラーを要素にバインドするための簡単なメカニズムを提供します。これを使用する必要があります。
  2. 関数display()はグローバルスコープではなく、に渡された無名関数のスコープ内でのみ表示され.ready()ます。これが実際に意味することは、要素をクリックする<a>と、見えない機能を実行しようとしているということです。
  3. ループ内で関数を宣言するforと、最後の反復の値を使用して単一の関数になります。
  4. 変数idは文字列ではなくDOM要素であるため、AJAX呼び出しデータの一部として変数を渡すと、必要な値が渡されない可能性があります。
  5. HTML要素のid属性は一意の識別子であるため、実際には一意である必要があります。2つの<div id="one">要素（または同じ要素を持つ他の要素id）を持つことは無効です。

代わりに次を試してください。

$(document).ready(function () {
    $('.link').click(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "myphp.php",
            data: { id: this.id },
            dataType: "json",
            success: function (msg) {
                if (msg.success) {
                    $("#one").html(msg);
                } else {
                    alert("error");
                }
            }
        });
    });
});

は$(document).ready()、要素が存在する（DOMの準備ができる）までコードが実行されないようにします。は$('.link')、クラスが含まれるすべての要素link（<a>要素）を選択します。この関数は、これらすべての要素にイベントハンドラーを.click()追加します。click匿名関数のeパラメーターには、jQueryの正規化されたイベントオブジェクトが引数として渡されます。

の呼び出しe.preventDefault()はデフォルトの動作（リンクをたどる）を防ぎ、最後にへの呼び出し$.ajax()はAJAX呼び出しを送信します。async: false必要ないので削除しました。イベントハンドラー関数内では、イベントthisをトリガーした要素（つまり、<a>クリックした特定の要素）を参照していることに注意してください。

HTMLの問題についてはまだ取り上げていませんが、上記の問題のリストから、問題を自分で修正するための基礎が得られるはずです。

私はPHPプログラマーではないので、サーバー側のコードの有効性について実際に話すことはできません。Firefoxを使用している場合は、Firebugをインストールすることをお勧めします。それ以外の場合F12は、スローされているJavaScriptエラーについて通知するため、ブラウザーの開発者ツールの使用方法を学習します（ボタンを押して開きます）。

于 2013-02-21T10:03:05.707 に答える
0

成功のコールバックを置き換えます。

success: function(msg) {
    $("#one").html(msg);
}

msg.success存在しません。成功をチェックする必要がないことに加えて、成功コールバックが呼び出されているため、成功したことはすでにわかっています。

于 2013-02-21T09:56:00.740 に答える
0

PHPスクリプトを変更する必要があります。

//Some thing
$reply['success'] = "Success"; //Create an associative array which is going to be input of json_encode()
if($return = display($id)) {
    $reply['success'] = "Some Success Message";
} else {
    $reply['error'] = " Some Error Message";
}
echo json_encode($reply);

ajaxでは、

$.ajax({
            ...
            ...
            success: function(msg) {
                if(msg.success) {
            $("#one").html(msg);
                } else {
                    alert("error" + msg.error);
                }
            }
        });

また、phpのバージョンも確認してください。一部の下位バージョンはjson_encode（）をサポートしていません。注：上記のコードは実際のものではありません。しかし、それがあなたにあなたの仕事をするためのいくつかのアイデアを与えることを願っています。

于 2013-02-21T10:01:02.410 に答える
0

代わりにクラスでこのように使用することができます：

<div class="stitre">
   <a href="#" onclick="display(this.id)" id="link1" class="link"> Link 1</a>
</div>
<div class="one"></div>
<div class="stitre">
  <a href="#" onclick="display(this.id)" id="link2" class="link"> Link 2</a>
</div>
<div class="one"></div>

次に、この関数をこのように使用するだけで、次の必要はありませんdoc ready。

function display($id) {
    $.ajax({
        async: false,
        type: "POST",
        url: "myphp.php",
        data: {id:$id},   //<----------send like this
        dataType: "json",
        success: function(msg) {
            if(msg.success) {
                $($id).next(".one").html(msg);
            } else {
                alert("error");
            }
        }
    });
}

ノート：

<div id="stitre">
   <a href="#" onclick="display()" id="link1" class="link"> Link 1</a>
</div>
<div id="one"></div>
<div id="stitre">
  <a href="#" onclick="display()" id="link2" class="link"> Link 2</a>
</div>
<div id="one"></div>

他の問題はそれですyou are using same id for multiple dom elements、それはまったく有効ではありません。どちらかchange id to class instead.

于 2013-02-21T10:04:59.800 に答える