Ajax之引入

【一】Ajax简介

【1】精髓

精髓：异步提交/局部刷新

【2】发送请求的方式

• 向后端发送请求的方式
  • 浏览器地址直接url回车
    • GET请求

• a标签的 href 属性
  • GET请求
• form表单
  • GET请求/POST请求

• Ajax
  • GET请求/POST请求

【3】简介

Ajax不是新的编程语言，而是一种使用现有标准的新方法(类比装饰器)

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

这种特点给用户的感觉就是在不知不觉中完成了请求和响应过程

• Ajax(Asynchronous JavaScript and XML)是一种用于创建动态网页的编程技术。

  • 它通过在网页上进行异步数据传输，实现了在不重新加载整个页面的情况下更新部分页面内容的能力。

• Ajax的核心技术包括使用JavaScript和XMLHttpRequest对象与服务器进行数据交互，以及利用DOM(Document Object Model)来动态地更新页面。

• 通过使用Ajax，网页可以在后台与服务器进行数据交换，并在不刷新整个页面的情况下，根据服务器返回的数据实时更新页面的某些部分。

• 这种技术带来了很多好处，比如提高了用户体验、减少了网络流量和服务器负载，并使得开发人员能够创建更加交互和动态的网页应用程序。

• 虽然Ajax最初是指Asynchronous JavaScript and XML，但如今已经不仅限于使用XML作为数据传输的格式，而是可以使用各种格式，如JSON(JavaScript Object Notation)。

• 总结起来，Ajax是一种强大的前端开发技术，通过异步数据传输和动态页面更新，提供了更好的用户体验和交互性，广泛应用于现代Web应用程序的开发中。

Ajax的学习按理来说其实还是js代码，应该学习JavaScript的Ajax的写法，就不学习JavaScript版本的，直接学习jQuery版本的，帮我们封装了，如果不封装，js版本的Ajax非常复杂

document.getElementById('d1').innerHTML = xmlhttp.responseText;
document.getElementByClssName('c1').innerHTML = xmlhttp.responseText;
document.getElementById('d1').innerHTML = xmlhttp.responseText;
document.querySelector('#d1 a ').innerHTML = xmlhttp.responseText;
document.querySelector('.c1').innerHTML = xmlhttp.responseText;
document.querySelector('h1').innerHTML = xmlhttp.responseText;

【二】Ajax引入

【1】案例

• 页面上有三个 input 框
  • 在前面两个框输入数字，点击按钮，朝后端发送Ajax请求
  • 在后端计算出结果，再返回给前端动态展示的第三个input框中

• 要求
  • 整个过程页面不能刷新，也不许在前端计算

后端

                
def ab_ajax(request):
    # if request.is_ajax():

    if request.method=='POST':
        '''接收ajax提交过来的数据'''
        # <QueryDict: {'inp1': ['1'], 'inp2': ['1']}>
        print(request.POST)
        # d1 = request.POST.get('inp1') # str
        # d2 = request.POST.get('inp2') # str
        # d3 = int(d1) + int(d2)
        # 序列化
        import json
        # json.dumps(d3)
        user_dict = {"username":"kevin", "password":123}
        # return HttpResponse(json.dumps(d3))
        return HttpResponse(json.dumps(user_dict))
        # return JsonResponse(user_dict)
    return render(request, 'ab_ajax.html')

• html 页面

<script>

    $(".btn").click(function () {
        var inp1 = $("#inp1").val();
        var inp2 = $("#inp2").val();

        // 把获取到的两个值提交到后端，然后让Python来计算，然后返回
        $.ajax({
            url:'', // 默认不写，就是朝当前地址传递
            type:'post',
            dataType:'json',
            data:{inp1:inp1, inp2:inp2},
            // 回调函数用来接收后端返回的数据
            success:function (res) {
                // {"username": "kevin", "password": 123}
                console.log(res,)  // 就是拿后端返回的数据

                // 反序列化
                {#res=JSON.stringify()#}
                // 后端返回的数据别忘了反序列化，但是你的护短别往了序列化
                {#res=JSON.parse(res)#}
                console.log(typeof res)  // 就是拿后端返回的数据
                console.log(res.username)  // 就是拿后端返回的数据
                console.log(res.password)  // 就是拿后端返回的数据
                {#$("#inp3").val(res);#}
            }
        })

    })
</script>