Ajax - 显示2个不同的json数据

Question

我的功能正常工作但我需要通过单击加载不同json数据的按钮来加载2个不同的json数据

-javascript数据（通过点击javascript）

-html数据（通过点击html）

我的按钮：

＆＃13;

＆＃13;

$(function() {


  $('.js-url').on("click", function(e) {
    e.preventDefault();
    $.ajax({
      url: "https://api.github.com/search/repositories?q=stars:>1+language:'+javascript+",
      method: "GET",
      success: function(data) {
        //console.log(data);
        //$(".git-user").html(JSON.stringify(data));

        $.each(data.items, function(i, items) {
          var html_to_append =
            '<div class="git-user col-4"><div class="name">' +
            items.name +
            '</div><img  class="image" src="' +
            items.owner.avatar_url +
            '" /><a class="repo" href="' +
            items.html_url +
            '">' +
            items.name +
            "</a></div>";
          $("#items-container").append(html_to_append);
        });
      },
      error: function() {
        console.log(data);
      }


    });

  });

  $('.html-url').on("click", function(e) {
    e.preventDefault();
    $.ajax({
      url: "https://api.github.com/search/repositories?q=stars:>1+language:'+html+",
      method: "GET",
      success: function(data) {
        //console.log(data);
        //$(".git-user").html(JSON.stringify(data));

        $.each(data.items, function(i, items) {
          var html_to_append =
            '<div class="git-user col-4"><div class="name">' +
            items.name +
            '</div><img  class="image" src="' +
            items.owner.avatar_url +
            '" /><a class="repo" href="' +
            items.html_url +
            '">' +
            items.name +
            "</a></div>";
          $("#items-container").append(html_to_append);
        });
      },
      error: function() {
        console.log(data);
      }


    });

  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <nav class="">
      <a class="js-url" href="https://api.github.com/search/repositories?q=stars:>1+language:'+javascript+">Javascript</a>
      <a class="html-url" href="https://api.github.com/search/repositories?q=stars:>1+language:'+html+">html</a>
    </nav>
  </div>
  <div class="row">
    <div id="items-container"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

 <nav class="">
    <a class="js-url" href="https://api.github.com/search/repositories?q=stars:>1+language:'+javascript+">Javascript</a>
    <a class="html-url" href="https://api.github.com/search/repositories?q=stars:>1+language:'+html+">html</a>
</nav>

Answer 1

将您的代码放入命名函数中，这样您就可以默认调用相同的函数，也可以在用户点击时调用。

＆＃13;

＆＃13;

$(function() {
  $('.js-url').on("click", ajaxJS);
  $('.html-url').on("click", ajaxHTML);

  ajaxJS();

  function ajaxJS(e) {
    if (e) {
      e.preventDefault();
    }
    $.ajax({
      url: "https://api.github.com/search/repositories?q=stars:>1+language:'+javascript+",
      method: "GET",
      success: function(data) {
        //console.log(data);
        //$(".git-user").html(JSON.stringify(data));
        var html_to_append = '';
        $.each(data.items, function(i, items) {
          html_to_append +=
            '<div class="git-user col-4"><div class="name">' +
            items.name +
            '</div><img  class="image" src="' +
            items.owner.avatar_url +
            '" /><a class="repo" href="' +
            items.html_url +
            '">' +
            items.name +
            "</a></div>";
        });
        $("#items-container").html(html_to_append);
      },
      error: function() {
        console.log(data);
      }
    });

  }

  function ajaxHTML(e) {
    if (e) {
      e.preventDefault();
    }
    $.ajax({
      url: "https://api.github.com/search/repositories?q=stars:>1+language:'+html+",
      method: "GET",
      success: function(data) {
        //console.log(data);
        //$(".git-user").html(JSON.stringify(data));
        var html_to_append = "";
        $.each(data.items, function(i, items) {
          html_to_append +=
            '<div class="git-user col-4"><div class="name">' +
            items.name +
            '</div><img  class="image" src="' +
            items.owner.avatar_url +
            '" /><a class="repo" href="' +
            items.html_url +
            '">' +
            items.name +
            "</a></div>";
        });
        $("#items-container").html(html_to_append);
      },
      error: function() {
        console.log(data);
      }
    });
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <nav class="">
      <a class="js-url" href="https://api.github.com/search/repositories?q=stars:>1+language:'+javascript+">Javascript</a>
      <a class="html-url" href="https://api.github.com/search/repositories?q=stars:>1+language:'+html+">html</a>
    </nav>
  </div>
  <div class="row">
    <div id="items-container"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我保存了很多行代码。简单易行！

$(document).ready(function() {
	$('* .load-json').on('click', function(e) {
    var lang = $(this).data('lang');

    e.preventDefault();

    $.ajax({
      url: $(this).attr('href'),
      method: "GET",
      beforeSend: function() {
        $('#items-container .loading').html('Loading items - ' + lang);
      },
      success: function(data) {
        //console.log(data);
        //$(".git-user").html(JSON.stringify(data));
        
        $('#items-container').html('');

        $.each(data.items, function(i, items) {
          var html_to_append =
            '<div class="git-user col-4"><div class="name">' +
            items.name +
            '</div><img  class="image" src="' +
            items.owner.avatar_url +
            '" /><a class="repo" href="' +
            items.html_url +
            '">' +
            items.name +
            "</a></div>";
          $("#items-container").append(html_to_append);
        });
      },
      error: function() {
        console.log(data);
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
		<nav class="">
			<a class="load-json" href="https://api.github.com/search/repositories?q=stars:>1+language:'+javascript+" data-lang="javascript">Javascript</a>
			<a class="load-json" href="https://api.github.com/search/repositories?q=stars:>1+language:'+html+" data-lang="html">html</a>
		</nav>
	</div>
	<div class="row">
		<div id="items-container">
      <div class="loading"></div>
    </div>
	</div>
</div>