ajax请求简介：

ajax是利用前端的技术，向服务器发送一个异步请求

原有的请求在请求后需要刷新整张页面，但是用ajax请求后只需要刷新一部分页面即可；

xhr基础属性：

 

 

 

 

 

Jquery与ajax：

使用$.ajax({})

 

Ajax的html页面：

<body>
<div id="show">我是原来展示的东西</div>
<button id="button">get JQurey</button>
<script src="{% static 'js/jquery-3.1.1.min.js' %}" ></script>
<script>

    $(function (){                                           #方法名
        $('#button').click(function (){                      #如何出发ajax
                $.ajax({                                     
                    url:"{% url 'JQ_get_change' %}",         #ajax消息请求路由
                    type:'GET',                              #请求方式
                    data:'name=mahuayu',                        
                    success:function (res){                  #在哪个地方修改
                        $('#show').html(res)                  
                    }

                })

            })

    })

 那么问题来了  现在是传递一句话  使用 return HttpResponse（XXXX）可以实现

如果要传递大量的数据该怎么办呢？

json表示：

 

 

获取json对象：

<script src="{% static 'js/jquery-3.1.1.min.js' %}" ></script>
<script>
    var user={
            "username" : "mahuayu",
            "age" : 22,
        }
    var user_list=[
        {
             "username" : "mahuayu",
            "age" : 22,
        },
        {
             "username" : "zhangyaling",
            "age" : 22,
        },
        {
             "username" : "xiaohuang",
            "age" : 22,
        },
        {
             "username" : "xiaohong",
            "age" : 22,
        }

    ]

        function showjson(){
        {#var user={#}
        {#    "username" : "mahuayu",#}
        {#    "age" : 22,#}
        {# #}
        {#console.log("username",user.username)#}
        {#console.log("age",user.age)#}
             $.each(user_list,function (i,obj){
                 console.log("id:"+i);
                     console.log("name:"+obj.username);
            })
    }
    </script>

页面展示：

 Python中json的表示：

 

 Ajax发送Get请求:

实际小训练展示：        

 从数据库获取数据返回js格式的方式一：

def showjson_getuser_change(request):
    users = ajaxuser.objects.all()
    user_list=[]
    for user in users:
        d={}
        d['id'] =user.id
        d["name"] = user.name
        d['age']=user.age
        d['phonenumber']=user.phonenumber
        user_list.append(d)


    return JsonResponse(user_list,safe=False)

 从数据库获取数据返回js格式的方式二：url页面：

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态展示用户页面</title>
</head>
<body>
<script src="{% static 'js/jquery-3.1.1.min.js' %}" ></script>
<button id="showuser">获取用户数据</button>
<table border="2">
    <tr>
        <th> 编号</th>
        <th> 姓名</th>
        <th> 年龄</th>
        <th> 手机号</th>
    </tr>
    <tbody id="usertable">
    </tbody>
    </table>

<script>
    $(function (){
        $('#showuser').click(function (){
                $.ajax({
                    url:"{% url 'showjson_get_change' %}",
                    type:'GET',
                    dataType: 'json',
                    success:function (res){
                       var html='';
                        $.each(res,function (i,obj){
                            html+='<tr>'
                             html+='<td>'+obj.id+'</td>'
                            html+='<td>'+obj.name+'</td>'
                            html+='<td>'+obj.age+'</td>'
                            html+='<td>'+obj.phonenumber+'</td>'
                             html+='</tr>'
                    });
                    $('#usertable').html(html);
                    }
                })
            })
    })

</script>

</body>
</html>

展示效果：

ajax发送post请求：

在这个案例我们要做的事情是发送一个post请求并对其进行校验工作

这种情况就需要我们去做异步请求处理了 

因为不可能在登录的时候直接返回一大堆数据给人看  那就很尴尬了！

# ajax
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

HAS2024：华为云以系统性创新加速千行万业智能化升级

avatar 华为云开发者联盟
cover

数仓的两种轻量级数据交换格式：json与jsonb

avatar 华为云开发者联盟
cover

如何基于香橙派AIpro对视频/图像数据进行预处理？

avatar 华为云开发者联盟