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

欢迎来到精彩的函数式编程世界。

我假设你正在根据“索引”做一个“获取”请求，这是一个网址？如果是这种情况，那么您需要提供回调。

$('#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函数式编程”，看看你是否可以得到一个解释，说明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请求非常简单......所以请参考this page

Answer 3

尝试绑定链接的点击事件。通过这种方式，您可以删除任何内联的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());
});

我如何使用javascript函数的ajax

3 个答案: