美文网首页
jquery ajax方法-wikipeadia api的利用

jquery ajax方法-wikipeadia api的利用

作者: 大白熊_8133 | 来源:发表于2018-11-08 15:00 被阅读0次

    学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

    相关文章

      网友评论

          本文标题:jquery ajax方法-wikipeadia api的利用

          本文链接:https://www.haomeiwen.com/subject/jjgixqtx.html