代码之家 › 专栏 › 技术社区 › sajal

jquery中的DRI?-N00B问题[已结束]

ajax jquery javascript

-2

sajal · 技术社区 · 16 年前

有人能告诉我如何创建和调用自己的jquery函数吗?(我绝对是前端noob)

以这个例子代码为例:

      <script>
  $(document).ready(function(){
    $.getJSON("http://127.0.0.1:8000/json/storylist/",
        function(data){
          $.each(data.stories, function(i,item){
            $row = item.title;
            $('#storylist tr:last').after("<tr><td>" + item.id + "</td><td>" + item.date + "</td><td>" + item.title + "</td><td></td><td>" + item.priority + "</tr>");
            if ( i == 3 ) return false;
          });
        });

           $("#refresh").click(function(event){
                alert("yay u clicked refresh!");

    $.getJSON("http://127.0.0.1:8000/json/storylist/",
        function(data){
          $.each(data.stories, function(i,item){
            $row = item.title;
            $('#storylist tr:last').after("<tr><td>" + item.id + "</td><td>" + item.date + "</td><td>" + item.title + "</td><td></td><td>" + item.priority + "</tr>");
            if ( i == 3 ) return false;
          });
        });


            }); 
  });

      </script>

您可以看到json调用,编辑表的代码被复制了2次。我的目的是让JSON部分在页面加载时运行一次,每次用户单击刷新链接时运行一次。如果我继续使用当前的代码,很明显这将是维护它的一个主要的PITA。

有什么线索吗?

2 回复 | 直到 16 年前

mck89 16 年前

尝试将JSON函数包装成另一个函数:

function JSONrequest(){
     $.getJSON("http://127.0.0.1:8000/json/storylist/",
        function(data){
          $.each(data.stories, function(i,item){
                $row = item.title;
                $('#storylist tr:last').after("<tr><td>" + item.id + "</td><td>" + item.date + "</td><td>" + item.title + "</td><td></td><td>" + item.priority + "</tr>");
            if ( i == 3 ) return false;
          });
        });

}

$(document).ready(function(){JSONrequest()});
$("#refresh").click(function(){JSONrequest()});

现在,当调用jsonrequest函数时,总是执行相同的代码块。

VoteyDisciple 16 年前

一种方法是简单地将自己的函数声明为普通的javascript函数,并将该函数传递给 .click() 方法并从调用它 .ready() :

function requestStories() {
    $.getJSON("http://127.0.0.1:8000/json/storylist/",
        function(data){
          $.each(data.stories, function(i,item){
                $row = item.title;
                $('#storylist tr:last').after("<tr><td>" + item.id + "</td><td>" + item.date + "</td><td>" + item.title + "</td><td></td><td>" + item.priority + "</tr>");
            if ( i == 3 ) return false;
          });
        });
    }); 
}

$(document).ready(function() {
    $("#refresh").click(requestStories);
    requestStories();
});

或者,如果 。单击()。 处理程序是只有执行JSON请求时,只需调用 。单击()。 在赋予它使其运行的函数后立即执行。例如:

$(document).ready(函数()。{ $(“刷新”)。单击(function()。{ G.G.J. http://127.0.0.1:8000/json/storylist/ “ 功能(数据){ $.each(data.stories,函数(i,项){ $row=item.title; $('storylist tr:last').after(“”+item.id+“”+item.date+“”+item.title+“”+item.priority+“”); 如果(i==3)返回false; (}); (}); (}); 返回错误; }。点击(); (});

注意那额外的 。单击()。 最后。这意味着,“现在我为您提供了一个函数来运行 #refresh 点击,假装 刷新 点击了一下。记住,这会成功的 全部的 与此类单击关联的代码,因此只有当您只想运行此函数时,此函数才有效。