Django ---- Ajax请求

最新推荐文章于 2024-03-26 23:14:39 发布

奔腾的小野马~~

最新推荐文章于 2024-03-26 23:14:39 发布

阅读量167

点赞数

分类专栏： WEB 框架

本文链接：https://blog.csdn.net/weixin_44342108/article/details/103620808

版权

WEB 框架专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Django ---- Ajax请求

ajax: 是异步的javascript

它是在不重新加载页面的情况下，对页面进行局部的刷新。

$ajax({
	'url': 请求的地址,
	'type': 请求的方式 ,
	'datatype':预期返回的数据格式,
	'data':参数,
	'async':false, // 默认为异步ajax请求，false 为同步的ajax请求
}).success(function(data){
	// 回调函数，data 为后台返回的数据

}

Ajax 请求的一个过程：
1、发起ajax请求
2、返回json数据
3、执行回调函数
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax请求测试</title>
    {# 引入 jQuery 文件#}
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 绑定到Ajax的click 事件
            $('#ajax_test').click(function(){
                alert(1)
                $.ajax({
                    'url':'/ajax_handle',
                    'datatype':'json',
                }).success(function(data){
                    // 进行一个处理
                    alert(2)
                    if (data.res == 1){
                        $('#message').show().html('提示信息')
                    }
                })
                alert(3)
            })
        })
    </script>
    <style>
        #message{
            display:none;
            color:red;
        }

    </style>
</head>
<body>
    <input type="button" id="ajax_test" value="Ajax请求" >
    <div id="message"></div>

</body>
</html>

同步和异步的区别;

异步是不等待ajax的回调函数就往下执行  即是 浏览器先弹出 1 ，3,   2

同步是等待ajax的回调函数执行完了才往下执行    即是 浏览器会弹出  1，2，3

案例：用ajax post 请求来登录验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录页面</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $('#btnlogin').click(function(){
                //1 . 获取用户名和密码
                username =  $('#username').val()
                password = $('#password').val()
                // 2. 触发ajax post 请求
                $.ajax({
                    'url':'/login_ajax_check',
                    'type':'post',
                    'data':{'username':username,'password':password},
                    'dataType':'json',
                }).success(function(data){
                    // res =0 登录失败
                    // res = 1 登录成功
                    if (data.res == 0){
                        $('#errmsg').show().html('用户名或密码错误')
                    }
                    else{
                        //跳转页面
                        location.href='/index'
                    }
                })
            })


        })
    </script>
    <style>
        #errmsg{
            display:none;
            color:red;
        }
    </style>


</head>
<body>
    <h2>Ajax登录页面</h2>
    用户名：<input type="text" id="username"><br/>
    密  码：<input type="password" id="password"><br/>
    <input type="button" id="btnlogin"  value="登录">
    <div id="errmsg"></div>
</body>
</html>

奔腾的小野马~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Django ---- Ajax请求

Django ---- Ajax请求ajax: 是异步的javascript它是在不重新加载页面的情况下，对页面进行局部的刷新。$ajax({ 'url': 请求的地址, 'type': 请求的方式 , 'datatype':预期返回的数据格式, 'data':参数, 'async':false, // 默认为异步ajax请求，false 为同步的ajax请求}).success...
复制链接

扫一扫