25.ajax初识

最新推荐文章于 2022-10-25 10:33:02 发布

杨鸿儒

最新推荐文章于 2022-10-25 10:33:02 发布

阅读量181

点赞数

分类专栏： Django学习笔记

本文链接：https://blog.csdn.net/Yanghongru/article/details/105707434

版权

Django学习笔记专栏收录该内容

32 篇文章 1 订阅

订阅专栏

1.什么是ajax?

使用js技术发送请求的一种方式,特点是异步、局部刷新、传输数据量小
ajax的简单使用

2.ajax的简单使用

1.基于ajax完成两数相加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
</head>
<body>
<input type="text" name="i1">+
<input type="text" name="i2">=
<input type="text" name="i3">
<button id="go1">计算</button>
<script>
    $("#go1").click(function () {

        $.ajax({
            url: "/test1/", {# ajax发送请求的地址 #}
            type: "POST", {# ajax发送请求的方式 #}
            data: {
                {# ajax请求携带的数据 #}
                i1: $("[name='i1']").val(),
                i2: $("[name='i2']").val()
            },
            success: function (res) {  {# 请求返回的结果 #}
                $("[name='i3']").val(res)
            }
        })
    })
</script>
</body>
</html>

2.基于ajax判断用户名是否存在

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<input type="text" name="user" id="ipt" value="{{ ipt }}"><span id="ret"></span>
<button id="res">注册</button>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script>
        $("#res").click(function () {
            $.ajax({
                url:"/process/",
                type:"post",
                data:{
                    user:$("[name='user']").val(),
                },
                success:function (ret) {
                    $("#ret").text(ret)
                }
            })
        })
</script>
</body>
</html>

3.基于ajax上传文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" name="file">
<button id="btn">上传</button>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script>
    $("#btn").click(function () {
        var form_obj = new FormData();
        form_obj.append("f1", $("[name=file]")[0].files[0]);  {# 后端通过f1获取文件对象 #}
        $.ajax({
            url: "/upload/",
            type: "post",
            processData: false, {# 不处理数据的编码格式 #}
            contentType: false, {# 不处理请求头 #}
            data: form_obj,
            success: function (ret) {
                alert(ret)
            }
        })
    })
</script>
</body>
</html>

杨鸿儒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
25.ajax初识

1.什么是ajax?使用js技术发送请求的一种方式,特点是异步、局部刷新、传输数据量小ajax的简单使用2.ajax的简单使用1.基于ajax完成两数相加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</...
复制链接

扫一扫