0

私はAjaxを初めて使用します。私は次のjavascript関数を使用して、ユーザーがliを選択したリストから値を取得しています。ただし、ページがリロードされるたびにこの関数を使用します。この関数を使用してajaxを使用しようとしています。このneed構文でajaxを使用するにはどうすればよいですか。

私の機能：

 <script type="text/javascript" language="javascript">
    function pagelim(index)
{
    var page_lim=$('#page_num li').get(index).id; 
    self.location="<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim ;
}
    </script>

    <script type="text/javascript" language="javascript">
    function dateby(index)
{
    var date_by=$('#sort-by-date a').get(index).id; 
    var cls=document.getElementById(date_by).className;
    if(date_by=="ASC")
    {
       date_by="DESC";

    }
    else
    {
       date_by="ASC";
    }
    self.location="<?php echo get_option('head'); ?>"+'?details&sort=' + date_by ;
}
    </script>

リストから取得する値：

  <div class="sort-links">
       <span class="by-date" id="sort-by-date">Sort by: <a  href="#" id='<?php _e($sort_by)?>' class='<?php _e($class)?>' onclick="dateby($(this).index())" >Date</a>
    </span> 

    //list to select value 
    <span id="view-on-page">View on Page: <a href="#" class="down-arrow"><?php if($lim=="") { _e($limit); } else { _e($lim); }  ?></a>
                  <ul id="page_num">
                      <li id="5" onclick="pagelim($(this).index())"><a href="#">5</a></li>
                      <li id="10" onclick="pagelim($(this).index())"><a href="#">10</a></li>
                      <li id="15" onclick="pagelim($(this).index())"><a href="#">15</a></li>
                  </ul>
                </span> 
             </div>
4

3 に答える 3

1

関数型プログラミングのすばらしい世界へようこそ。

URLである「インデックス」に基づいて「取得」リクエストを行っていると思いますか？その場合は、コールバックを提供する必要があります。

$('#page_num li').get(index. function(id) {
    var page_lim = id; // assuming that's what you sent back.
    self.location="<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim ;
});

ajax リクエストが終了した後に呼び出される関数にすべてを入れる必要があることに注意してください。リクエストから送り返すのは必要なIDだけだと思います。

jQuery AJAX 呼び出しは非同期です。つまり、関数 $(...).get(url, callback); AJAX 呼び出しが終了する前に値を返します。そのコールバック関数は、AJAX 呼び出しが完了した後にのみ発生します。jQuery API ドキュメントに時間を費やすことをお勧めします。

また、「javascript 関数型プログラミング」を Google で調べて、JavaScript (および jQuery) が関数から期待する値を常に返すとは限らないことの説明を取得できるかどうかを確認することもできます。その点で、PHP や ASP.NET などの他の言語とは大きく異なります。

于 2012-12-11T05:31:19.700 に答える
0

リンクのクリックイベントにバインドしてみてください。このようにして、関数に含まれているインラインJavaScriptとそのすべてを削除できます。

$("li a").click(function() {
  //should alert the id of the parent li element
  alert($(this).parent.attr('id'));

  // your ajax call
  $.ajax({
    type: "POST",
    // post data to send to the server
    data: { id: $(this).parent.attr('id') }
    url: "your_url.php",
    // the function that is fired once data is returned from your url
    success: function(data){
      // div with id="my_div" used to display data
      $('#my_div').html(data);
    }
  });        
});

このメソッドは、リスト要素が次のようになることを意味します。

<li id="5"><a href="#">5</a></li>

id = "5"はあいまいなので、これは理想的ではありません。

次のようなものを試してください

<li class="select_me">5</li>

クリックイベントのバインドは次のようになります。

// bind to all li elements with class select_me
$("li.select_me").click(function() {
  // alert the text inside the li element
  alert($(this).text());
});
于 2012-12-11T06:53:55.230 に答える
0

こんにちは、これがお役に立てば幸いです... div（「MyDiv」など）を作成し、動的に変更したいすべての要素を（ページの更新なしで）配置します...次に、jQuery.load（）メソッドを試してください...のように

<div id = "MyDiv">
<div class="sort-links">
       <span class="by-date" id="sort-by-date">Sort by: <a  href="#" id='<?php _e($sort_by)?>' class='<?php _e($class)?>' onclick="dateby($(this).index())" >Date</a>
    </span> 

    //list to select value 
    <span id="view-on-page">View on Page: <a href="#" class="down-arrow"><?php if($lim=="") { _e($limit); } else { _e($lim); }  ?></a>
                  <ul id="page_num">
                      <li id="5" onclick="pagelim($(this).index())"><a href="#">5</a></li>
                      <li id="10" onclick="pagelim($(this).index())"><a href="#">10</a></li>
                      <li id="15" onclick="pagelim($(this).index())"><a href="#">15</a></li>
                  </ul>
                </span> 
             </div>
</div> //end of MyDiv

次に、スクリプトを次のように変更します 

<script type="text/javascript" language="javascript">
    function pagelim(index)
{
    var page_lim=$('#page_num li').get(index).id; 
    $("#MyDiv").load("<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim);
}
    </script>

    <script type="text/javascript" language="javascript">
    function dateby(index)
{
    var date_by=$('#sort-by-date a').get(index).id; 
    var cls=document.getElementById(date_by).className;
    if(date_by=="ASC")
    {
       date_by="DESC";

    }
    else
    {
       date_by="ASC";
    }
    $("#MyDiv").load("<?php echo get_option('head'); ?>"+'?details&sort=' + date_by);
}
    </script>

私はこれをテストしていないことに注意してください...

jQueryを使用してAJAXリクエストを実行するのは非常に簡単です...だからplsはこのページを参照してください

于 2012-12-11T05:22:43.140 に答える