Question

我有两个json请求，我想以相同的方式转换为HTML。我使用我想要的相应网址制作了两个变量，并且使用代码的函数我不想重复两次。但我不确定如何在自动完成Jquery中调用该函数。

    var randomURL = "http://en.wikipedia.org/w/api.php?action=query&format=json&prop=info%7Cextracts&generator=random&inprop=url&exchars=175&exlimit=10&exintro=1&explaintext=1&exsectionformat=plain&grnnamespace=0&grnlimit=10&callback=?";

/*var searchURL = "http://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts%7Cinfo&titles=&generator=search&exchars=175&exlimit=20&explaintext=1&exsectionformat=wiki&exintro=1&inprop=url&gsrsearch=" + makeStringWPLus(item) + "&callback=?";*/

function populateJSON (url){
  $.getJSON(url.data.param1, function(data) {

    var pageKeys = Object.keys(data.query.pages);

    $(".results ul li").remove();


  for (var i = 0; i < pageKeys.length; i++){
    var title = data.query.pages[pageKeys[i]].title;
    var URL = data.query.pages[pageKeys[i]].fullurl;
    var extract = data.query.pages[pageKeys[i]].extract;

    var html = "<li><a href="+ URL +"><h3 class='title'>"+ title +"</h3><p>"+ extract +"</p></a></li>";

    $(".results ul").append(html);
    }
  });
}



$("button").click({param1:randomURL},populateJSON);


$("#search").autocomplete({
  appendTo: ".search-box",
  position: { collision: "fit", at: "center bottom+40"},
  open: function( event, ui ) {
    $(".results ul").css("display", "none");
    $(".ui-menu").css("display", "block");
  },
  close: function( event, ui ) {
    $(".results ul").attr("style", "initial");
  },
  select: function(event,ui){
    var item = String(ui.item.value);

    $(".results ul li").remove();
    $("#search").attr("value", ui.item.value);

    function makeStringWPLus (val){
  return val.split(" ").join("+");
}


    $.getJSON("http://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts%7Cinfo&titles=&generator=search&exchars=175&exlimit=20&explaintext=1&exsectionformat=wiki&exintro=1&inprop=url&gsrsearch=" + makeStringWPLus(item) + "&callback=?", function(data) {

  var pageKeys = Object.keys(data.query.pages);

  for (var i = 0; i < pageKeys.length; i++){
    var title = data.query.pages[pageKeys[i]].title;
    var URL = data.query.pages[pageKeys[i]].fullurl;
    var extract = data.query.pages[pageKeys[i]].extract;

    var html = "<li><a href="+ URL +"><h3 class='title'>"+ title +"</h3><p>"+ extract +"</p></a></li>";

    $(".results ul").append(html);

  }
   $( "#search" ).autocomplete( "close" ); 
});

  },
  autoFocus: true,
  source: function (request, response){
    $.ajax({
      url: 'http://en.wikipedia.org/w/api.php',
      dataType: "jsonp",
      data:{
        "action": "opensearch",
        'format': "json",
        "search": request.term
      },
      success: function(data){
        response(data[1]);
      }

    }); 
  }
});

What I have so far so you can see what I am working with

Answer 1

我相信我解决了自己的问题。

var randomURL = "http://en.wikipedia.org/w/api.php?action=query&format=json&prop=info%7Cextracts&generator=random&inprop=url&exchars=175&exlimit=10&exintro=1&explaintext=1&exsectionformat=plain&grnnamespace=0&grnlimit=10&callback=?";

function makeStringWPLus (val){
  return val.split(" ").join("+");
}


function populateJSON (url){
  $(".results ul li").remove();
  $.getJSON(url, function(data) {

    var pageKeys = Object.keys(data.query.pages);

    for (var i = 0; i < pageKeys.length; i++){
      var title = data.query.pages[pageKeys[i]].title;
      var URL = data.query.pages[pageKeys[i]].fullurl;
      var extract = data.query.pages[pageKeys[i]].extract;

      var html = "<li><a href="+ URL +"><h3 class='title'>"+ title +"</h3><p>"+ extract +"</p></a></li>";

      $(".results ul").append(html);
    }
  });
}

$("button").click(function(){
  populateJSON(randomURL);
});



$("#search").autocomplete({
  appendTo: ".search-box",
  position: { collision: "fit", at: "center bottom+40"},
  open: function( event, ui ) {
    $(".results ul").css("display", "none");
    $(".ui-menu").css("display", "block");
  },
  close: function( event, ui ) {
    $(".results ul").attr("style", "initial");
  },
  select: function(event,ui){
    var item = String(ui.item.value);

    var searchURL = "http://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts%7Cinfo&titles=&generator=search&exchars=175&exlimit=20&explaintext=1&exsectionformat=wiki&exintro=1&inprop=url&gsrsearch=" + makeStringWPLus(item) + "&callback=?";

    populateJSON(searchURL);

   $( "#search" ).autocomplete( "close" ); 

  },
  autoFocus: true,
  source: function (request, response){
    $.ajax({
      url: 'http://en.wikipedia.org/w/api.php',
      dataType: "jsonp",
      data:{
        "action": "opensearch",
        'format': "json",
        "search": request.term
      },
      success: function(data){
        response(data[1]);
      }

    }); 
  }
});

如何将两个几乎完全相同的getJSON调用放入一个函数中，以便在自动完成UI中使用

1 个答案: