HTML利用标签接入B站搜索功能

HTML利用标签接入B站搜索功能

输入许嵩
输入老番茄
在这里插入图片描述
在这里插入图片描述
搜索记录

最近在制作个人网页的时候,想在网站中插入两个搜索接口,一个用来对接B站**搜索视频,另一个用来对接QQ音乐,搜索音乐。
*搜索了一下后发现有使用百度进行搜索的例子:*
利用HTML中的form标签进行验证,很是惭愧,HTML5并没有认真仔细的学习完,也没有上手做个不错的项目,于是重新学习了一下这个标签的用法,
实现了一个大概这样的效果:


首先对于bilibili,因为B站提供了专门的搜索网站:bilibili搜索
然后我们进入网站后,尝试搜索一下:

可以看到当我们在输入刺客567时,链接变成了这样,也就是多了all?/keyword=搜索内容,于是我尝试着直接在链接处修改=之后的值,发现确实跳转到了我们搜索内容所在的界面
这样就好办了,form标签的作用就是将我们的输入内容发送到其服务器:
代码如下:

<form action="https://search.bilibili.com/all?" method="get" target="_blank">

                    <input id="bfind" type="text" name="keyword" />
                    <input type="submit"  value="搜索MV" />

其中form标签中的

  1. action指定了我们提交的地址。
  2. method指d定了我们所需要的进行的活动。
    method有get和post两个选项,其中get和post的区别在于提交数据的方式
  3. 用post提交的数据,表单的数据不会出现在URL中,比较安全
  4. 而get则会以?name1=value1&name2=value2的形式将其数据附加到URL的后面,而这也正是我们所需要的,所以我们定义name属性为keyword,url就会变为我们之前所测试的内容
qq音乐
大千世界
搜索

而对于QQ音乐的搜索,则出现了一些岔子,因为在QQ音乐中,没有专门的搜索网站(有一个,但是好像已经失效了qq音乐搜索
所以我们打开其官网QQ音乐
通过搜索框,我们看到:
其URL中为如上图中所显示的结果,
在y.qq.com/之后跟着的有portal/search.html,显然这是搜索功能所在的文件位置,
然后再看后面的部分,发现我们的输入部分在最后,
由此可看出来,其中的page=1等属性都是用来指定搜索范围的,于是我们尝试着将除了最后一句的w=大千世界以外的这些表单数据去掉,
也就是在浏览框输入

发现搜索同样成功,由此,我们就只需要向这个URL提交我们所需要的数据,就可以完成想要的搜索操作啦。
代码如下:

<form action="https://y.qq.com/portal/search.html?" method="get" target="_blank">            
                    <input type="text"  name="w"   /> 
                    <input type="submit" value="搜索音乐"  />
            </form>

这样就完成了我们想要的操作结果。
感谢阅读,
希望这篇文章能对您有所帮助。

评论

  1. 谢广平
    Android Chrome
    1年前
    2020-1-17 12:13:33

    广平牛逼

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇