ajax向服务器请求数据实现html页面局部刷新

使用html的表单,可以提交数据到服务器,但是如果只是使用表单,那么数据提交的时候,整个页面都需要被刷新,当有部分数据需要从服务器加载的资源,发送请求后,会对整个页面进行提交,用户体验不是太好。

操作方法

  • 01

    对于html ,它无法做到修改后马上刷新的效果,需要达到这个效果,需要借助javascript.

  • 02

    javascript,如果需要局部刷新,那么我们需要使用到的技术是ajax。使用ajax,可以只刷新页面的部分内容。

  • 03

    ajax技术,可以很好的提升用户体验,当提交请求到服务器响应资源的时候,不需要对整个页面进行刷新。下图,我们没有使用ajax,得到数据后,会对整个页面进行刷新。

  • 04

    如下图中的三级联动菜单,我们将数据保存到数据库,对数据库进行查询后返回数据,如果不使用ajax的话,那么就无法做到局部刷新。

  • 05

    我这里使用jquery来写ajax,使用jquery来写ajax,可以减少代码量,您也可以使用原生的方式来写ajax。

  • 06

    首先,需要给予一个数据提交到服务器的资源路径地址url,Ajax会将资源提交到服务器对资源请求进行分析与处理。

  • 07

    data是您需要传输的具体数据内容,服务器会根据您的请求资源类型来进行处理。

  • 08

    传输数据到服务器,主要使用的方式主要有get方式与post方式,我这里选择的是get方式。

  • 09

    接下来,您可以选择返回来的数据格式。现在更多的是使用json,您可以根据您的需求来选择不同的格式。

  • 10

    请求成功,得到数据后,您可以选择要执行的内容,在函数体内,您可以根据您的业务需求来进行处理即可。

  • 11

    我这里选择遍历得到的资源,并对其进行输出到页面中,实现页面的局部刷新。

(0)

相关推荐

  • lols6观战服务器请求数据失败 无法连接服务器

    相信许多玩家,都碰到过在使用英雄联盟观战好友对局游戏的时候,经常会出现连接不上服务器的提示,有时候多次重新连接可能会进去,有时候则无法观战. 操作方法 01 网络不稳定造成,有时候带宽达不到的话,会导 ...

  • rsync服务器架设(数据同步|文件增量备份)

    为了实现多个服务器负载均衡,我们需要这几个服务器之间进行数据同步,而rsync软件也能胜任,下面我们来介绍如何架设rsync服务器来达到文件增量备份和数据同步的功能。 什么是rsync rsync 是 ...

  • 2004无法打开服务器服务.服务器性能数据将不会被返回

    事件查看器-应用程序 日期:2006-8-2 来源:PerfNet 时间:15:22PM 类别:无 类型:错误 事件ID:2004 描述:无法打开服务器服务。服务器性能数据 将不会被返回。返回的错误码 ...

  • 傲游浏览器怎么设置页面自动刷新?

    傲游浏览器怎么设置页面自动刷新? 操作如上图所示,右键点击傲游浏览器中想要自动刷新的页面标签,在弹出的菜单中找到最底下的“自动刷新”,随后自定义自动刷新的时间就可以了。

  • 如何让火狐浏览器页面自动刷新方法介绍

    火狐浏览器是一款非常好用的主页浏览工具,小编目前也是使用的此浏览器,但是有些用户最近向我们求助,如何让火狐浏览器打开的页面自动刷新,那么小编在整理了一些信息后,发现火狐有这么个插件,下面看小编为大家介 ...

  • Excel如何对数据透视表的局部数据进行排序

    办公软件Excel可以通过更多的方法分析.管理和共享信息,从而帮助您做出更好.更明智的决策,让你高效率的工作学习.那么Excel如何对数据透视表的局部数据进行排序呢? 操作方法 01 首先打开exce ...

  • 怎样使打开工作簿时数据透视表会自动刷新数据?

    数据透视表源数据有变化时,如何设置可以使得打开工作簿时数据透视表会自动刷新数据. 操作方法 01 点击数据透视表,在面板上点击"选项"菜单,如下图示. 02 在控制面板的左下方,点 ...

  • 自动备份Linux/Unix服务器的数据

    primabackup.sh 说明文档 版本:2.0.1 工具下载地址:http://swsoft.com.cn/downloads/Prima/Tools/primabackup-2.0.2.tar ...

  • 服务器无法通过系统非页面共享区来进行分配

    服务器开始阶段性的出现死机状态了。隔一段时间就无法连接了。重启后正常,过一段时间又是同样的问题。 事件查看器中有大量的同样报错: 事件ID:2020 描述:服务器无法通过系统页面共享区来进行分配,因为 ...