「jQuery+PHP」ajax请求以及接口PHP响应教程

各位客官好,平时我们在开发时,不可避免的会用到Ajax与后台做数据交互,那么今天小编今天就给各位没有用过Ajax的客官以及准备接触的客官讲解一下,并且小编会为大家讲一下哀求时的loading层等待以及php的sleep延时执行.

首先,我们为大家做一些准备工作,一个html文件,一个php文件,一个jQuery库,因为jQuery的代码量要小于原生js,所以我们选择jQuery的ajax写法,如下图.

小编是纯手打现写的,可以看到,我们的文件只有0KB和1KB大小,各位客官看在小编辛苦可以点个赞,点个关注,谢谢客官.

那么我们现在开始编写html代码以及jquery代码,首先我们随便写一个标签,并且为标签绑定点击事件,我们在点击时哀求ajax.

然后我们为大家写一个jQuery的ajax的标准写法,注释我已经为大家写好了,大家可以细心看一下,我们这次就先用ajax的成功返回处理在里面编写,先无视其他几种数据处理.

之后我们在php文件中写一个简单的数据接口,接受数据,并且返回给前台一个json的数据.

下面我们可以通过console.log将返回数据打印到控制台.

我们看到右侧控制台,已经返回了我们在php文件中echo出json格式的数据,看到这个返回数据,也就是我们成功再前台用Ajax哀求php,并且php成功返回给前台数据,那么下面我们为大家在哀求时加一个loding层,提高一下用户视觉上的体验.

效果如下,当我们哀求的时候,将事先写好的loading层显示,之后当哀求成功之后,将loading层隐藏即可.

代码如下修改.

这样,我们的效果就出来了,当然,小编这里只是为各位客官测试,写的比较少,客官们可以在实际应用中变换写法,实现更多的效果.

提示,该效果因为涉及到了php文件,客官们再测试的时候需要在环境下测试,否则会报错的.

小编也同时虚心的欢迎各位大神的指教和纠错,也欢迎没太懂的同学进行一个留言,小编会第一时间看到之后进行回复的.

客官大人,小编文笔不是很好,但是每天保持手写文章,每天都会用心花几个小时更新文章 您的关注点赞转发是小编最大的动力 (* ￣3)(ε￣ *)