• 技术文章 >Python框架 >Django

    AJAX的简介和基本使用方法

    爱喝马黛茶的安东尼爱喝马黛茶的安东尼2019-07-09 13:25:42原创2802

    ajax简介:

    AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。

    AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

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

    AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

    同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;

    异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

    ajax的基本使用方法:

    # 前端向后端请求方式:1 浏览器手动输入网址(get请求),2 a标签的href属性(get请求),form表单(get/post请求,默认为get)

    # ajax特点:异步提交、局部刷新

    # 基本使用语法:

      提交url (url:’...‘)

      提交方式 (type: 'post')

      提交数据 (data:{'''})

      提交后通过回调函数得到的返回结果 (sucess:function(data){...})

    # 基本使用示例:(ajax的默认传输数据的格式是urlencoded)

    相关推荐:《Python视频教程

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>图书管理系统</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="/static/layui/css/layui.css">
        <script src="/static/layui/layui.js"></script>
        <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
    </head>
    <body>
    <button class="btn btn-success" id="b1">AJAX测试</button>
    <script>
        {#绑定按钮点击触发ajax提交数据#}
        $('#b1').on('click', function () {
            $.ajax({    {#固定语法格式#}
                url: '',  {#不写默认朝当前页面发请求#}
                type: 'post',   {#请求方式#}
                data : {'name': 'sgt', 'pwd': '123'},    {#发送的请求数据#}
                {#这里的data就是回调函数success获取到的后端响应返回的数据#}
                success:function (data) {
                    swal({
                        title: 'AJAX',
                        text: '模拟这里显示了返回的数据',
                        icon: 'success',
                        button: 'OK',
                        })
                }
            })
        })
    </script>
    </body>
    </html>

    我们知道ajax默认的传输数据格式是urlencoded,前面我们说过,ajax可以用json作为数据格式传输。

    现在强调一点:前后端传输数据必须要求数据是什么格式就应该用对应的传输格式,一一对应去传输,否则Django解析数据出问题,以至于我们在前后端拿不到想要的数据。

    所以:

    第一:我们需要在ajax发送请求代码中指定发送数据格式:

    contentType: 'application/json',

    第二:后端获取json格式数据不再是request.POST,而是通过request.body(得到的是一个bytes类型的json格式数据),所以再处理一下:

    res = json.loads(request.body.decode('utf-8')),这就得到前端ajax发送过来的json格式数据。

    专题推荐:django ajax
    上一篇:聚合查询和分组查询的相关介绍 下一篇:三分钟理解JOSN与XML的区别

    相关文章推荐

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网