我如何在JavaScript函數中使用Ajax

Question

我對Ajax很陌生。 我正在使用以下javascript函數從那些用戶選擇li的列表中獲取值。 但每次重新加載頁面時都使用此功能。 我正在嘗試通過此功能使用ajax。如何使用這種需要語法的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>

Answer 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文檔。

您也可以使用Google“ javascript函數式編程”，看看是否可以獲得JavaScript（因此jQuery）並不總是返回函數期望值的解釋。 在這方面，它與其他語言（例如PHP或ASP.NET）非常不同。

Answer 2

嗨，希望這對您有所幫助...創建一個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請求非常簡單...請參閱此頁面

Answer 3

嘗試綁定到鏈接的click事件。 這樣，您可以刪除任何內聯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());
});