jquery ajax方法-wikipeadia api的利用

2018-11-08  本文已影响0人  大白熊_8133

学node.js教程用ajax向服务器请求数据,研究了半天发现jquery ajax方法这东西我用过啊,用之前写的wikipedia搜索程序整理下吧

ajax() 方法通过 HTTP 请求加载远程数据,执行AJAX异步HTTP请求。
首先,要先加入

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

然后是AJAX的各种参数

参数

1. url:

类型为string,是发送请求的地址,像是Wikipedia提供的API中

url:"https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch="+searchwords+"&prop=info&inprop=url&utf8=&format=json"

就是请求搜索serachword时返回的各种信息

2.type:

类型为string,请求方式 是"POST" 或 "GET", 默认为 "GET"。

3.data

可以是对象也可以是string,发送到服务器的数据,比如我们利用 http.createServer(function(req,res)建立服务器,req可以接收传递的数据

4.dataType

类型是string,预期服务器返回的数据类型

5.success

请求成功时执行的回调函数,function(data,textStatus)返回的数据和返回的状态

6.error

这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。function (XMLHttpRequest, textStatus, errorThrown)

那其实知道ajax基本形式之后构建一个wiki搜索十分的简单
页面部分不多谈,想怎么写怎么写,主界面有一个input,一个search的按钮,结果顶部一个input和按钮用于继续搜索和显示
按钮绑定的onclick响应函数为

function SearchResult()
{
    $ (".main").addClass("hidden");
//hidden 类中,display的值为none,也即点击按钮后主界面不显示,显示结果界面
    $ (".result").removeClass('hidden');
    var words=$("#search").val();
//获取搜索的词
    $('#search2').val(words);
//将搜索的词显示在结果界面的input标签中
    $.ajax({
      url:"https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch="+words+"&prop=info&inprop=url&utf8=&format=json",
      dataType:"JSONP",
      success:function(data)
      {
        var search=data.query.search;
//返回的是一个searchlist,包含了是个相关词
        for(var i=0;i<10;i++)
        {
          var title=data.query.search[i].title;
          var title2=title.replace(/ /g,"_");
          var url="https://en.wikipedia.org/wiki/"+title2;
          var snippet=data.query.search[i].snippet;
//wiki api返回的基本信息中连html格式都给你了
          $(".ResultContent").append("<div class='result-list Result-"+i+"'><a href="+url+">"+title+"</a><br><div class='result-snippet snippet-" + i + "'></div></div>")
          $(".snippet-"+i).html(snippet);
//每收到一条信息,在界面中添加一个div
        }
      }
     })
}

除此之外,还有随机显示词条的功能,定义一个按钮

<button class="button_box" id="button1" onClick="javascript:window.location.href='https://en.wikipedia.org/wiki/Special:Random'">Random</button>

完成
codepen:https://codepen.io/bigbybear469/pen/LBVeeo

上一篇下一篇

猜你喜欢

热点阅读