微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ajax--实现异步请求,接受响应及执行回调

ajax最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页的内容

ajax指是一种创建交互式网页应用的网页开发技术,其实就是实现前后端交互。

1)ajax是异步javascript,异步的意思即非阻塞,就像线程,在代码运行到ajax请求时,它会分成两条线,一条线去运行ajax请求里面的内容,另一条线去运行主程序(即ajax请求后面的代码),当然我们可以因需要异步设置成同步(即在运行到ajax请求时,将阻塞运行完ajax请求后,再去运行ajax外,后面的代码

2)注意ajax请求是由jquery发起的,因此用于jquery代码块中。

3)执行相应的视图函数(这里是在一个py,PHP文件创建一个视图函数,或者class类,给这个视图函数分级设置一个URL地址,ajax请求中的url即填写完整的URL地址),返回json内容

4)执行相应的回调函数(即返回成功后的执行success里面的 js,jquery去影响web页面),通过判断 json 内容,进行相应的处理。

ajax不需要任何浏览器插件

现在我们搭建一个服务器环境,为什么要搭建服务器环境呢?因为ajax请求一般都是需要服务器调用数据库。现在这里有个比较方便的软件  -- wampserver 

这个wampsever就是在window下的apache、PHPMysqL的服务器软件

这里我们需要安装wampsever  安装过程的具体步骤自己在百度中找教程(最好不要安装在C盘,找个内存多一点的盘安装)

在安装的文件夹中找一个www的文件夹,www文件就是网站内容所在区域    本地IP:127.0.0.1 端口号80  本地域名locolhost

在pycharm中open打开www文件,在此文件中写html,css,js,PHP等。

ajax要有后台服务器,可以用java,python,PHP搭建一个后台服务器。

 

写前端html文件的时候的用法:$.ajax({    })。$.ajax是所有ajax方法中最底层的方法。所有其他的方法都是基于$.ajax()方法的封装。

方法中的参数有:(这里只写了一部分)注意都要用引号引住。

参数 类型 说明
url   为string(因此要用引号引起来) 发送请求的地址
 type string 请求的方式:post或get请求。认为get请求
data Object或string 发送服务器的数据,键值对,字符串或对象,这里post请求有此参数,get请求直接在地址处?后面传参即可
dataType string 后端返回给前端的数据类型,比如html,xml,json。本来是string,在ajax请求时设置dataType为json,将字符串;类型变为json类型
success function 请求成功后调用的回调函数,需要操作的东西一般在这里写    用法success:function(e 这个字母e可以是其他英文){写内容}    注意这个()里面的e或者说其他东西就是后端HttpResponse或者JsonResponse返回的东西,这里与dataType有关
error function 请求失败时调用的回调函数
async Boolean 是否异步处理,认为True,false为同步处理

 

 

 

 

 

 

 

 

 

 

 

post请求中参数data的两种写法:

1)“后端要接收的参数名=”+前端某个input的 val()或value值+“&后端要接收的参数名=”+前端的input中的值    例>>>

2)字典传参    {“后端要接收的参数名”:前端某个input的 val()或value值  ,"后端要接收的参数名":前端的input中的值 }    例>>>

 

get请求中前端向后端传参的方法

 

 

 

 

在post请求进行前后端数据的交换,python后端 request.POST.get(“前端给后端要接收的参数在data时起名,如上 un 和 pa ”)  接收前端的数据,当然这是对POST请求时的接收方式,get请求时,则将POST改为GET即可。

这里就是后端接收上图前端数据的方法  

 

 下图是实现前后端交互时前端需要的操作,这里还设置了同步

 

 

 

另外我们可以直接  0$.get()  或  $.post()

 

先说$.get()请求  (参数之间用逗号隔开)

一个参数:请求的接口,即要访问的地址

第二个参数:请求接口时携带的参数  可以是字典的形式传参    

  

      或者这样传参:

 

 

第三个参数:接口请求成功后的回调参数,即原本$.ajax()中的success后面的function()

 第四个参数:接口返回的数据类型,即设置后端返回给前端返回的数据类型,本来不管后端返回是HttpResponse或者JsonResponse,没有前端这个参数都会显示后端返回的是字符串类型,有了这个参数,就可以使字符串变成该有的形式,比如这里写“json”,后端传的数据就变成了 json 类型

 

 

 

$.post()的相关用法:(跟$.get()的用法类似)

一个参数:请求的接口,即要访问的地址

第二个参数:请求接口时携带的参数  可以是字典的形式传参

第三个参数:接口请求成功后的回调参数,即原本$.ajax()中的success后面的function()

 

 

现在我们先讲一下用PHP一个后台服务器(这里为什么先讲一下用PHP后台服务器呢?因为用python做后台服务器需要的东西有点多,暂且先拿PHP用一下)

PHP文件:在www中新创建一个file文档>>>此文档以  <?PHP  开头 ,以  ?>  结尾。第一个注意点运行此文件时要开启wampsever软件

PHP一个名句--遍地是黄金。  变量都是由$为开头的。

第一步:在PHP文件获取前端传递过来的数据。这里注意在PHP文件中的变量名由$开头的变量名,前端是post请求则在获取的时候$_POST获取,前端是get请求则用$_GET获取方法例下--$name=$_POST['在前端传递来的数据'])

第二步:在数据库查询(这里先不写)

第三步:根据数据库查询的结果不同,返回给前端不同的数据。

第四个参数:接口返回的数据类型。

 

 

 

还有一个知识点:你发现在jquery中收集表单中的数据时,需要对每个标签$()   ,这里有个快速收集表单提交的数据的方法

serializeArray()可以很方便的收集表单里面的数据      例如  这里表单有id属性可以$('input'),也可以$("#register").serializeArray()收集表单数据

 

 收集的数据为 [{},{},...]   (列表嵌套字典的形式)类型

 

 

 

 

 

 还有一个ajax中涉及到的知识点:跨域

 什么是跨域呢?比如说自己懒得弄接口了,去网上找个现成的,(比如要在前端弄个天气预报板块,自己不写后端,直接用网上免费的一些网站)。

例如 >>>  在wampserver中浏览器输入 127.0.0.1:80 和 输入localhost:80 都能打开wampserver的www文件(wampserver的首页),127.0.0.1是它的ip地址 ,localhost是它的域名。但在浏览器下访问的是127.0.0.1,而ajax请求的是localhost时,会报错。

这时我们只需在后端写下下面两个代码即可实现跨域:

 

 

 

 

 

 

 

 

 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐