Python学习笔记—Django与Ajax

最新推荐文章于 2024-10-13 09:28:28 发布

阝东一

最新推荐文章于 2024-10-13 09:28:28 发布

阅读量151

点赞数

文章标签： Python Django

本文链接：https://blog.youkuaiyun.com/qq_45496894/article/details/103221357

版权

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

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

优点：
AJAX使用Javascript技术向服务器发送异步请求
AJAX无须刷新整个页面

一、基于jquery的Ajax实现

以下是一个简单的示例：
项目名/templates/index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  这里很重要！如果不加 jquery.min.js，会报错：Uncaught ReferenceError: $ is not defined
    且必须要加在static/js/jquery-3.3.js 代码的上面-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="static/js/jquery-3.3.js"></script>
</head>
<body>
<h4>INDEX页面</h4>
<button class="btn">提交Ajax</button>
<p class="show"></p>
<script>
        $(".btn").click(function () {
            $.ajax({
                url:"/handle_ajax/",
                type:"get",
                success:function (response) {
                    console.log(response);
                    $(".show").html(response)
                }
            })
        })
</script>
</body>
</html>```

注意：
在页面导入js 文件时，报错“”Uncaught ReferenceError: $ is not defined“”如下图：
在这里插入图片描述
错误原因：文件加载的顺序不对，jQuery文件的顺序要在前面
解决方法：把jQuery文件写在所有script文件前面，且jquery.min.js也要在最前面！
错误写法：

<script src="static/js/jquery-3.3.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

正确写法：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="static/js/jquery-3.3.js"></script>

目前暂时进展到这来，未完待续