Ajax

"""
异步提交
局部刷新
例子:github注册
	动态获取用户名实时的跟后端确认并实时展示的前端(局部刷新)
	
朝发送请求的方式
	1.浏览器地址栏直接输入url回车						   GET请求
	2.a标签href属性											    GET请求
	3.form表单														 GET请求/POST请求
	4.ajax																GET请求/POST请求	
	
AJAX 不是新的编程语言,而是一种使用现有标准的新方法(比较装饰器)


AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)


Ajax我们只学习jQuery封装之后的版本(不学原生的 原生的复杂并且在实际项目中也一般不用)
所以我们在前端页面使用ajax的时候需要确保导入了jQuery
ps:并不只有jQuery能够实现ajax,其他的框架也可以 但是换汤不换药 原理是一样的
"""
```

### 小例子

```python
"""
页面上有三个input框
	在前两个框中输入数字 点击按钮 朝后端发送ajax请求
	后端计算出结果 再返回给前端动态展示的到第三个input框中
	(整个过程页面不准有刷新,也不能在前端计算)
"""
$('#btn').click(function () {
        // 朝后端发送ajax请求
        $.ajax({
            // 1.指定朝哪个后端发送ajax请求
            url:'', // 不写就是朝当前地址提交
            // 2.请求方式
            type:'post',  // 不指定默认就是get 都是小写
            // 3.数据
            {#data:{'username':'jason','password':123},#}
            data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
            // 4.回调函数:当后端给你返回结果的时候会自动触发 args接受后端的返回结果
            success:function (args) {
                {#alert(args)  // 通过DOM操作动态渲染到第三个input里面#}
                {#$('#d3').val(args)#}
                console.log(typeof args)

            }
        })
    })
              
              
"""
针对后端如果是用HttpResponse返回的数据 回调函数不会自动帮你反序列化
如果后端直接用的是JsonResponse返回的数据 回调函数会自动帮你反序列化

HttpResponse解决方式
	1.自己在前端利用JSON.parse()
	2.在ajax里面配置一个参数
			(后面再讲)
"""

  

  """
  异步提交
  局部刷新
  
  参考案例:github注册实时获取用户名发送给后端确认并动态展示校验结果(页面不刷新)
  复习:input框实时监测事件	input事件
  
  我们学的是jQuery版本的ajax,所以你必须要确保html页面已经提前加载了jQuery
  """
  # ajax基本语法
  $.ajax({
    url:'',  # 朝后端哪个地址发送 跟action三种书写方式一致
    type:'get/post',  # 提交方式 默认get 跟form表单method参数一致
    data:{'username':'jason','password':123},  # 要发送的数据
    success:function(args){
      # 异步回调处理机制
    } 
  })
  """
  当你在利用ajax进行前后端交互的时候
  后端无论返回什么都只会被回调函数接受 而不再影响这个浏览器页面了
  """
  
  # 扩展 参数  代码发布项目还会涉及
  dataType:'JSON'
  """
  当后端是以HttpResponse返回的json格式的数据
  默认是不会自动反序列化的
  	1.自己手动JSON.parse()
  	2.配置dataType参数
  """
  
  # 结论:写ajax的时候 你可以直接将dataType参数加上 以防万一 或者后端就用JsonResonse
  $.ajax({
    url:'',  # 朝后端哪个地址发送 跟action三种书写方式一致
    type:'get/post',  # 提交方式 默认get 跟form表单method参数一致
    dataType:'JSON',  
    data:{'username':'jason','password':123},  # 要发送的数据
    success:function(args){
      # 异步回调处理机制
    } 
  })

  

posted @ 2022-04-05 03:31  咖喱给给啊  阅读(20)  评论(0)    收藏  举报