0

我对 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>
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 文档。

您也可以在 Google 上搜索“javascript 函数式编程”，看看是否可以解释 JavaScript（以及 jQuery）如何并不总是返回您期望的函数值。在这方面，它与 PHP 或 ASP.NET 等其他语言非常不同。

于 2012-12-11T05:31:19.700 回答
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 请求非常简单......所以请参考这个页面

于 2012-12-11T05:22:43.140 回答
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 回答