• 欢迎光临~

Ajax

开发技术 开发技术 2022-12-19 次浏览

Ajax

异步提交局部刷新

全称:AJAX(Asynchronous Javascript And XML)

中文名为:异步javascript和XML

通过JavaScript来操作 发送请求到服务端

XML:数据交互使用XML,现在主流使用JSON格式

局部刷新:JS的DOM操作

原生JS可以写Ajax请求的,但是写起来很复杂,而且需要考虑浏览器的版本(不推荐使用)
JQuery已经封装了1个ajax方法,直接调用JQuery,就可以发送Ajax请求
前后端分离的项目,依旧可以使用JQuery的ajax,但是axios更加主流一些

ajax可以发送 get请求/post请求

我们现在学习的是 jQuery 封装之后的版本
我们在使用Ajax的时候需要导入jQuery


代码案例展示:
       1.需要先给标签绑定事件
       2.
      

$('#ID').click(function(){
  #给标签绑定单击事件
  
  $.ajax({    
  #设置ajax参数
         url:'',
         #提交地址,不行就是朝当前地址提交
         type:'post',
         #请求方式 不行默认是get
         # data:{'name':'moon','password':'123'}
         # 固定值传送的数据
         date:{'name':$('#id').val()}
         # 动态传送数据给后端,传送的是获取到标签上的值
         success:function(args){
           #args=后端的返回值
           alert(args)
           #当后端有返回值的时候是自动触发这里面的代码
         }
         # 异步回调函数
                 })
  
})



后端:

def 视图函数名(request):
   if request.method == 'POST':
       date = request.POST 
       #date = <QueryDict:{'name':['111'],'password':['222']}
       name = request.POST.get('name')
			 #通过账号查询表中是否已经存在这个账号
       # 如果账号已存在可以返回 账号已存在 字符串
       return HttpResponse('该账号已存在')

前后端传输数据格式(contentType)

post请求数据的编码格式

'''
前后端传输数据的编码格式
1.urlencoded
2.formdata
3.json
'''


可以给后端发送post的请求的方式

1.form表单 默认数据编码格式是urlencoded 数据格式name=aaa&password=bbb
           django后端会自动解析处理到request.POST中
  
form表单

<form action='' method='post'>
      username:<input type='text' name='username'>
      password:<input type='password' name='password'>
      file:<input type='file' name='file'>
    
      <input type='submit'>
      
django后端针对符号urlencoded格式的数据 都会全部放入request.POST中
默认都是这种格式

如果你把编码格式改为formdate 那么普通的键值对还是解析到request.POST中
而文件会自动解析到 request.FILES中
所以如果需要接受文件需要改变form编码格式

form表单是无法发送json格式数据的



2.ajax请求
  
  <input type='button' value='按钮' id='a01'>
  
  <script> 
  $('#a01').click(function(){
    $.ajax({
      url:'',
      type:'post',
      data:{'username':'moon','age':20},
      success:function(args){
        
      }
      
    })
  })
  
  </script>

ajax默认的编码格式 也是 urlencoded
程序员灯塔
转载请注明原文链接:Ajax
喜欢 (0)