学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
网友评论