Ajax进阶

时间：2022-03-14 17:17:09

"POST":请求

POST请求：(一共三个方法)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>

<p>姓名：<input type="text" ></p>
<p>密码：<input type="password" ></p>
<button class="cc">提交</button><span class="error"></span>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
    function foo() {
    $(".error").html("")
}
    $(".cc").click(function () {
          // 方式1：
          $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' }
          });
        $.ajax({
            url:"/get_ajax/",
            type:"POST",
   #方法三：
    headers:{"X-CSRFToken":$.cookie('csrftoken')},#需要引入<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js "></script>
            data:{
   #方法二：
      csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),#需要加上Form表单和{% csrf_token%},
     
               name:$(":text").val(),
               pwd:$(":password").val(),
            },    // 请求数据 ，是js数据    ?name=yuan&pwd=123
            #这里的采用默认的数据发送格式
            success:function (data) {
                var data=JSON.parse(data);
                console.log(data);
                console.log(typeof data);
                if(!data["flag"]){
                    $(".error").html("用户名或者密码错误"),
                        setTimeout(foo,10000)

}
            }
        })

})

</script>

</body>

文件上传：

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

<form action="" method="post"  enctype="multipart/form-data">#一定要加上这个方法enctype

    {% csrf_token %}

    <p>姓名：<input type="text" name="user"></p>

    <p>文件：<input type="file" name="avatar"></p>

    <p><input type="submit"></p>

</form>

</body>

</html>

html

views函数

def upload(request):

    if request.method=="GET":

        return render(request,"load.html")

    if request.method=="POST":

        print("POST",request.POST)

        print("FILES",request.FILES)

        file_obj=request.FILES.get("avatar")

        file_obj=request.FILES.get("upload_avatar")

        with open(file_obj.name,"wb") as f:#上传文件

            for i in file_obj:

                f.write(i)

        print(file_obj)

        return  HttpResponse("上传成功")

formdata上传文件：

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    {% csrf_token %}

<form action="" method="post">

    <p>姓名：<input type="text"></p>

    <p>密码：<input type="password"></p>

    <p>头像：<input type="file" id="upload_avatar"></p>

    <button class="cc">提交</button><span class="error"></span>

</form>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js "></script>

<script>

    function foo() {

    $(".error").html("")

}

    $(".cc").click(function () {

          var formdata=new FormData();

             formdata.append("username",$(":text").val());

             formdata.append("password",$(":password").val());

             formdata.append("avatar",$("#upload_avatar")[0].files[0]);

        $.ajax({

            url:"/upload/",

            type:"POST",

            headers:{"X-CSRFToken":$.cookie('csrftoken')},

            data:formdata,

            contentType:false,

            processData:false,

            success:function (data) {

                var data=JSON.parse(data);

                console.log(data);

                console.log(typeof data);

                if(!data["flag"]){

                    $(".error").html("用户名或者密码错误"),

                        setTimeout(foo,10000)

                }

            }

        })

    })

</script>

</body>

</html>

views函数

def upload(request):

    if request.method=="GET":

        return render(request,"load.html")

    if request.method=="POST":

        print("POST",request.POST)

        print("FILES",request.FILES)

        # file_obj=request.FILES.get("avatar")

        # file_obj=request.FILES.get("upload_avatar")

        # with open(file_obj.name,"wb") as f:#上传文件

        #     for i in file_obj:

        #         f.write(i)

        # print(file_obj)

        return  HttpResponse("上传成功")

Ajax进阶的更多相关文章

  1. jQuery基础---Ajax进阶

    原文:jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一 ...

  2. 第一百七十四节，jQuery，Ajax进阶

    jQuery,Ajax进阶 学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 在 Ajax 课程中,我们了解了最基本的异步处理方式.本章,我 ...

  3. 前端 - js方式Ajax&sol; jquery方式Ajax &sol; 伪 ajax &sol;伪ajax 进阶方式

    DJANGO环境搭建: 目录文件: 关闭CSRF 添加目录文件路径 配置url 视图配置: index页面配置: 测试:(成功) 进入正题: ajax 通过GET提交数据至后台: <!DOCTY ...

  4. 20151211jquery ajax进阶代码备份

    //数据处理 $('form input[type=button]').click(function() { //json处理 /*$.ajax({ type:'POST', url:'test.js ...

  5. 20151211Jquery Ajax进阶学习笔记

    四．JSON 和 JSONP 如果在同一个域下,$.ajax()方法只要设置 dataType 属性即可加载 JSON 文件.而在非 同域下,可以使用 JSONP,但也是有条件的. //$.ajax( ...

  6. 20151210 Jquery 学习笔记 AJAX 进阶

    一．加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超 过一定时间的请求,用户就会变得不再耐烦而关闭页面.而如果在请求期间能给用户一些提 示,比如:正在努力加 ...

  7. Ajax进阶之原生js与跨域jsonp

    什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create ...

  8. Ajax进阶 FormData对象

    Ajax基础:http://www.cnblogs.com/-beyond/p/7919369.html xhr 2.0及FormData介绍 FormData对象 其实和 XMLHttpReques ...

  9. Jquery13 Ajax 进阶

    学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 一．加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题 ...

随机推荐

  1. Android数据库更新&mdash&semi;&mdash&semi;上万条数据的插入

    在实际情况下,很可能遇到会向一个表中插入10万条数据,而这样的数据库更新,如果用寻常的方式,在SQLiteOpenHelper.onUpdate()方法中不断的执行SQL语句,那么效率是可想而知的,甚 ...

  2. druid简介

    Druid首先是一个数据库连接池,但它不仅仅是一个数据库连接池,它还包含一个ProxyDriver,一系列内置的JDBC组件库,一个SQL Parser. 支持的数据库 Druid支持所有JDBC兼容 ...

  3. 阮老师讲解TF-IDF算法

    TF-IDF与余弦相似性的应用(一):自动提取关键词   作者: 阮一峰 日期: 2013年3月15日 这个标题看上去好像很复杂,其实我要谈的是一个很简单的问题. 有一篇很长的文章,我要用计算机提取它 ...

  4. ubuntu的网络配置

    1,检查网络是否通畅 ping www.baidu.com 2,检查网线是否插好 3,使用ifconfig查看当前活跃网络接口 ifconfig 4,配置IP地址.子网掩码.网关地址 sudo vi ...

  5. &lbrack;UWP&rsqb;做个调皮的BusyIndicator

    1. 前言 最近突然想要个BusyIndicator.做过WPF开发的程序员对BusyIndicator应该不陌生,Extended WPF Toolkit 提供了BusyIndicator的开源实现 ...

  6. webapi返回文件流

    逻辑说明 webapi返回类型为IHttpActionResult接口,内部方法返回HttpResponseMessage. public interface IHttpActionResult { ...

  7. 记录&period;net使用ueditor富文本编辑器

    UEditor是什么 最近在在项目的时候使用到了百度的富文本编辑器.官网有详细的操作流程文档.这里我只是记录项目中常用到的一些事件.以便日后可以方便查询. UEditor是百度的一个javascrip ...

  8. C&num;中设置窗口在最前显示而其他窗口不能使用

    对程序中的一个Form1处理,让其在打开的情况下,其他窗体都无法使用,全部焦点都在他身上. 1.这种方法最简单,直接调用窗体的模态对话框函数显示窗体 Form1.ShowDialog(): 2.设置窗 ...

  9. 《DSP using MATLAB》Problem 5&period;19

    代码: function [X1k, X2k] = real2dft(x1, x2, N) %% --------------------------------------------------- ...

  10. 算法笔记&lowbar;065&colon;分治法求逆序对（Java）

    目录 1 问题描述 2 解决方案 2.1 蛮力法 2.2 分治法(归并排序)   1 问题描述 给定一个随机数数组,求取这个数组中的逆序对总个数.要求时间效率尽可能高. 那么,何为逆序对? 引用自百度 ...

相关文章