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

更新时间:2023-06-14 16:54:13 阅读: 评论:0

参数类型说明
url  为string(因此要⽤
引号引起来)
发送请求的地址
type string请求的⽅式:post或get请求。默认为get请求
data Object或string发送服务器的数据,键值对,字符串或对象,这⾥post请求有此参数,get请求直接在地址处?后⾯传参即可
data
Type
string后端返回给前端的数据类型,⽐如html,xml,json。本来是string,在ajax请求时设置dataType为json,将字符串;类型变为json类型
succ ess function
请求成功后调⽤的回调函数,需要操作的东西⼀般在这⾥写⽤法success:function(e 这个字母e可以是其他英⽂){写内容}    注意这个()⾥⾯的e
或者说其他东西就是后端HttpRespon或者JsonRespon返回的东西,这⾥与dataType有关
error function请求失败时调⽤的回调函数
神妙
asyn c Boolean是否异步处理,默认为True,fal为同步处理
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请求⼀般都是需要服务器调⽤数据库。现在这⾥有个⽐较⽅便的软件  -- wamprver
这个wampver就是在window下的apache、php和mysql的服务器软件
这⾥我们需要安装wampver  安装过程的具体步骤⾃⼰在百度中找教程(最好不要安装在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()⽅法的封装。
此⽅法中的参数有:(这⾥只写了⼀部分)注意都要⽤引号引住。
ajax操作流程步骤:
第⼀步:在 jquery 中 $.ajax({ 参数等})  -- 先写好框架,例下 <script type="text/javascript">
$(function(){
$("#doisubmit").submit(function(event){      // 这⾥是对表单的提交
event.preventDefault() // 对表单提交的阻⽌
var name = $("form").find("input[name='info[truename]']").val()    // 前端中要获取的值
var mobile = $("form").find("input[name='info[mobile]']").val()
var qq = $("form").find("input[name='info[qq]']").val()
var cour = $("#zhuanye option:lected").html()  // 这是获取对lect下拉框选择哪个option标签
紧身衣
$.ajax({
url:"{% url 'about:jtjj' %}",
// 我要写的是⼀个既有get请求⼜有post请求的视图函数,如果之前写好了get请求,
     则此时url.py⽂件中就有了对应的url,就直接将url写到这⾥
type:"post",
data:{"name":name,"mobile":mobile,"qq":qq,"cour":cour,"csrfmiddlewaretoken":'{{ csrf_token }}'},
dataType:"json",
success:function(re){
console.log("11111111111111111111111111")
console.log(re)
if (re.code==0){
window.location.href = "127.0.0.1:8000/zixun?canshu="+re.erros
}
},
error:function(e){
console.log("aaaaaaaaaaaaaaaaaaaaa")
}
})
})
})
</script>
丧葬习俗第⼆步:我们发现还没有 url 的具体访问哪个地址,因此我们在 view.py ⽂件中写视图函数,例如class PythonRuXueView(View):
def get(lf, request):
timus = RuXueCour.objects.filter(cour_id=1)
conn = get_redis_connection("default")
count = ("pycount")if count == None:
count = 0
nn = 1
质数和合数的概念
for timu in timus:
xuanxiangs = XuanXiang.objects.filter(title_id=timu.id)
timu.xuanxiangs  = xuanxiangs
< = nn
nn += 1
context = {
"timus":timus,
"count":count,
}
return render(request,"ruxue_python.html",context)
def post(lf,request):          # 由于⼀般是在遇到提交form表单时
name = ("name")
mobile = ("mobile")
qq = ("qq")
cour = ("cour")
yanzheng = ("")
aa = ("aa")
ll = aa.split(",")
timus = RuXueCour.objects.filter(cour_id=1)
daanList = []
for timu in timus:
daan = DaAn.objects.filter(title_id=timu.id)[0].daan
daanList.append(daan)
a = 0
zhengque = 0
for l in ll:
if l == daanList[a]:
zhengque +=1
a += 1
print(zhengque)
if not all([name,mobile,qq]):
return JsonRespon({"code":0,"erros":"参数不完整"})
if not re.match(r'^1[3,5,7,8,9][0-9]{9}$',mobile):
return JsonRespon({"code":0,"erros": "你输⼊的⼿机号不正确"})
try:
ur=(name=name,mobile=mobile,qq=qq)
except:
ur = ate(name=name, mobile=mobile, qq=qq, cour=cour)        conn = get_redis_connection("default")
count = ("count")if count == None:
count = 1
el:
count = int(count)
count += 1
conn.t("pycount",count)
erros =  "你的⼊学评估检测答对 %s道,感谢您的参与" % zhengque
return JsonRespon({"code": 0, "erros":erros})
popost请求中参数data的两种写法:
1)“后端要接收的参数名=”+前端某个input的 val()或value值+“&后端要接收的参数名=”+前端的input中的值    例>>>
2)字典传参    {“后端要接收的参数名”:前端某个input的 val()或value值,"后端要接收的参数名":前端的input中的值 }    例>>>
注意:post请求时会触发csrf_token机制,共有三种解决⽅法,这⾥就介绍⼀种
第⼀步:在html 中写  {% csrf_token %} 注意当在浏览器右击看查看⽹页源代码时 {% csrf_token %}将以input标签显⽰。
第⼆步:在前端 ajax 请求之前获取它的val值,起名  csrfmiddlewaretoken
第三步:在ajax请求的data参数中传递此参数
当你⽤的不是post请求时,⽽是⽤⼀些 put,delete 这样的请求时,上⾯的⽅法不能⽤
1)我们可以在后端先引⼊
from django.views.decorators.csrf import csrf_exempt
2)在视图中覆写⽗类的dispatch⽅法
class创建的类名(View):
@csrf_exempt
def dispatch(lf, request, *args, **kwargs):
return super(创建的类名, lf).dispatch(request, *args, **kwargs)
  def put或delete⽅法(lf,request):
get请求中前端向后端传参的⽅法:
在post请求进⾏前后端数据的交换,python后端 (“前端给后端要接收的参数在data时起名,如上 un 和 pa ”)  接收前端的数据,当然这是对POST请求时的接收⽅式,get请求时,则将POST改为GET即可。
这⾥就是后端接收上图前端数据的⽅法
下图是实现前后端交互时前端需要的操作,这⾥还设置了同步
乌龟的功效与作用另外我们可以直接  $.get()  或  $.post()
先说$.get()请求(参数之间⽤逗号隔开)
第⼀个参数:请求的接⼝,即要访问的地址
第⼆个参数:请求接⼝时携带的参数可以是字典的形式传参     
      或者这样传参:
第三个参数:接⼝请求成功后的回调参数,即原本$.ajax()中的success后⾯的function()
第四个参数:接⼝返回的数据类型,即设置后端返回给前端返回的数据类型,本来不管后端返回是HttpRespon或者JsonRespon,没有前端这个参数都
会显⽰后端返回的是字符串类型,有了这个参数,就可以使字符串变成该有的形式,⽐如这⾥写“json”,后端传的数据就变成了 json 类型
$.post()的相关⽤法:(跟$.get()的⽤法类似)
第⼀个参数:请求的接⼝,即要访问的地址
第⼆个参数:请求接⼝时携带的参数可以是字典的形式传参
黄酮的功效与作用第三个参数:接⼝请求成功后的回调参数,即原本$.ajax()中的success后⾯的function()
现在我们先讲⼀下⽤php做⼀个后台服务器(这⾥为什么先讲⼀下⽤php做后台服务器呢?因为⽤python做后台服务器需要的东西有点多,暂且先拿php⽤⼀下)
写php⽂件:在www中新创建⼀个file⽂档>>>此⽂档以  <?php  开头 ,以  ?>  结尾。第⼀个注意点运⾏此⽂件时要开启wampver软件
php有⼀个名句--遍地是黄⾦。  变量都是由$为开头的。
第⼀步:在php⽂件中获取前端传递过来的数据。这⾥注意在php⽂件中的变量名由$开头的变量名,前端是post请求则在获取的时候$_POST获取,前端是get 请求则⽤$_GET获取(⽅法例下--$name=$_POST['在前端传递来的数据'])
第⼆步:在数据库中查询(这⾥先不写)
第三步:根据数据库查询的结果不同,返回给前端不同的数据。
第四个参数:接⼝返回的数据类型。维保合同
还有⼀个知识点:你发现在jquery中收集表单中的数据时,需要对每个标签$()  ,这⾥有个快速收集表单提交的数据的⽅法
rializeArray()可以很⽅便的收集表单⾥⾯的数据      例如  这⾥表单有id属性可以$('input'),也可以$("#register").rializeArray()收集表单数据
收集的数据为 [{},{},...]  (列表嵌套字典的形式)类型
还有⼀个ajax中涉及到的知识点:跨域
什么是跨域呢?⽐如说⾃⼰懒得弄接⼝了,去⽹上找个现成的,(⽐如要在前端弄个天⽓预报板块,⾃⼰不写后端,直接⽤⽹上免费的⼀些⽹站)。
例如 >>>  在wamprver中浏览器输⼊ 127.0.0.1:80 和输⼊localhost:80 都能打开wamprver的www⽂件(wamprver的⾸页),127.0.0.1是它的ip地址
,localhost是它的域名。但在浏览器下访问的是127.0.0.1,⽽ajax请求的是localhost时,会报错。
这时我们只需在后端写下下⾯两个代码即可实现跨域:

本文发布于:2023-06-14 16:54:13,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/953877.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:请求   参数   数据   需要   函数   服务器   返回
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图