位置: 编程技术 - 正文

jquery中用jsonp实现搜索框功能(json jquery)

编辑:rootadmin

推荐整理分享jquery中用jsonp实现搜索框功能(json jquery),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jq json,jq jsonp,jquery jsonview,jquery jsonview,jquery写入json文件,json jquery,jquery调用json数据,jquery使用jsonp,内容如对您有帮助,希望把文章链接给更多的朋友!

前面的话: 在上周本来想发一篇模仿必应搜索的界面。但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据。但是发现用前面的方法并不能获取到我想要的效果。无奈前几天电脑换系统,把之前的源码丢了(前面有个不好的习惯就是把最近在做的东西放桌面)。今天想彻底把这个问题搞明白。

用jquery和ajax进行初步的尝试:

(本代码是参考慕课网,搜索框制作视频制作,有关具体详情请参考视频。自己之前的代码找不到了,之前最先的想法也是来自那里,所以这次直接用那里的代码)

html代码:

css代码:

用jquery来实现效果:在这之前,我们基本上得到了我们想要的图形效果,但是我们在搜索框内输入想要查询的内容这时候是不会有效果的(一般的搜索框效果都是在键盘输入的时候,下面会显示一部分与之关联的关键搜索信息,然后鼠标移动上去点击后会跳到相应链接)。为了一步步验证我们的思路,我们这里修改一下之前的代码。

1、将li标签中的定位去掉;

2、在html中将li标签设置为隐藏。然后我们进行后面的操作。

思考一:如何在键盘输入的时候就显示相关信息(即:li标签中的内容)?

思路:我们先引入jquery,然后文档加载完后执行一个键盘事件,然后在键盘事件中改变相应的css效果

jquery中用jsonp实现搜索框功能(json jquery)

这时候,我们在搜索框中输入内容时,下面会跟着显示对应的搜索(模拟)

思考二:如何实现鼠标点击搜索按钮的时候,会搜索相应的内容?

思路:用鼠标点击事件,让鼠标点击后设置一个地址,点击后直接跳到相应地址,代码实现:

思考三:我们如何在搜索框输入数据时,下面会提示相关搜素信息?思路:我们我们用jquery中的get去实现,参考代码:

到这里,按理来说我们这里应该可以得到我们想要的结果了,但是,找了好久都没有发现哪里错了。视频里面接着描述了用JSONP来进行跨域操作,但是我也按视频中的操作,始终得不到我想要的结果,于是我埋头去看《javascript高级程序设计》,去找关于jsonp的用法

关于jsonp: 关于jsonp,《javascript高级程序设计》一书中介绍的比较少,下面是我看了之后的归纳。 jsonp的全写是 json with padding,其出现是为了解决各主浏览器的之间的同源策略的问题,一般来说ServerA 域下面的页面是没有办法与非 ServerA 下面的资源进行沟通,而 Html 的<script>元素是个例外,利用 <script> 这个开源策略,网页可以从其他来源动态获取 json数据,而这种模式就是所谓的 JSONP,用 jsonp 抓到并不是真正意义上 的 json 而是任意的 javascript ,它是直接通过 javascript 编译器编译而不是 json 解释器。更多关于json的知识请点击:

既然书上没有写,那就去网上搜索资源。这里截取一段和文章前面有关的信息的代码:

通过这段代码来修改我们自己的代码:

更多思考:我们可以在前面增加一些判断,让我们的效果实现起来更完美

经过测试前面的代码,发现还有不足,进一步修改代码:

到这里,我们的效果差不多就出来了,效果截图:

源代码已托管至:  这些天学习的新东西挺多的,现在有一个想法就是把最近学的东西把它串联起来,做一个综合的效果。参考必应网站,真的有好多东西已经可以做出来了,接下来的一段时间就好好的把自己想要做的效果实现好。

标签: json jquery

本文链接地址:https://www.jiuchutong.com/biancheng/379334.html 转载请保留说明!

上一篇:Jquery AJAX POST与GET之间的区别详细介绍

下一篇:用自定义图片代替原生checkbox实现全选,删除以及提交的方法(自定义图片制作软件)

  • 本期实际抵减税额合计0.00不等于
  • 计提印花税会计
  • 征信高风险是什么意思
  • 个体工商户可以给自己交五险一金吗
  • 银行回单电子退库是什么意思
  • 离职补偿金怎么做账
  • 增值税申报失败怎么撤销
  • 存出资本保证金是金融资产吗
  • 购买土地契税和印花税什么时候交
  • 库存商品赠送给客户要开票吗
  • 事业单位无形资产摊销
  • 土地使用权的账面价值计入在建工程
  • 应付账款保理是什么意思
  • 收到借户过账资金的短信
  • 跨年收入没有进项发票怎么做帐?
  • 工程预付款需要监理审批吗
  • 房地产并购的税率是多少
  • 怎么查找地方教育附加税的计税依据?
  • 企业被列为风险纳税人税控开票会显示什么
  • 独资企业需要交企业所得税吗
  • 票据转让后本公司还有责任吗
  • 公司作账都按不含税价吗
  • 授权费计入什么科目
  • 申报工伤的流程及时间
  • 进项税额转出会计分录月末如何结转
  • 专票可以当普票用不抵扣吗
  • 垃圾处理站利润
  • 发票作废什么时候生效
  • 每股收益怎么计算净利润
  • 存货跌价准备可以转回吗?
  • 运输费计入什么会计科目?
  • 水利基金返还分录怎么写
  • 违约金条款的特点
  • 企业从政府取得的经济资源均应当
  • 公司logo设计费入什么科目
  • vue上传文件和后端upload
  • 基于php技术
  • 工程施工科目下的间接费用怎么使用
  • 利润分配的顺序依次是什么
  • 小企业会计准则和一般企业会计准则的区别
  • 车票怎么抵扣增值税税率
  • 工资计提和发放能不能在一个月
  • 工地购买的厨房用品计入哪个科目
  • 印花税契税入固定资产吗
  • 织梦cms为什么不维护了
  • 其他业务支出属于利润表项目吗
  • 原材料盘盈会计处理
  • 机票改签费可以报销吗
  • 利用职务之便谋取私利是什么罪
  • 公对私转账有什么风险
  • 提取法定盈余公积会影响留存收益吗
  • 完税凭证抵扣进项税额分录
  • 应交税费未交增值税借方表示什么
  • 外币折算差额怎么计算
  • 职工福利费的扣除标准工资总额包括什么
  • 企业给加盟店的钱怎么算
  • 收到增值税专用发票会计科目
  • k3凭证模板
  • 资产负债表中的应交税费包括什么
  • 记账凭证的项目有哪些
  • 没有销售收入可以有销售费用吗
  • Windows 8.1下MySQL5.7 忘记root 密码的解决方法
  • 电脑显示window
  • linux中的ls命令的功能是变换工作目录到目标指定目录
  • win8的安全中心
  • .fs是什么格式
  • win8.1应用商店无法打开
  • 无法启动.dll
  • win 10移动版
  • visual studio 无法编译
  • css div高度填满父容器剩余空间
  • 详解Bootstrap四种图片样式
  • unity打包后的程序闪退
  • javascript数组操作方法
  • javascript面向对象 第三方类库
  • jquery 选择
  • 宁波市税务网上营业厅
  • 贵阳税务局领导
  • 山西电子税务局官网app
  • 北京税务局地税电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设