JS 小demo

最新推荐文章于 2024-09-12 08:23:39 发布

苟修今

最新推荐文章于 2024-09-12 08:23:39 发布

阅读量233

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/DeskyAki/article/details/94666435

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1 预览图片

<script>
    // 找到头像input框， 绑定changge事件
    $("id_avatar").change(function () {
        // 创建一个读取文件的对象
        var fileReader = new FileReader();
        // 取到选中的文件夹
        fileReader.readAsDataURL(this.file[0]);
        // 读取文件需要时间
        fileReader.onload = function(){
            // 读取完才执行
            $('#avatar-img').attr('src', fileReader.result);
        }
    })
</script>

一个js小demo(通过iput失去焦点向后端发送ajax请求，可以实时看看有没有重名之类的)

my_test.html

里面有两种ajxa跨域方式，虽然注释掉了一种，而且ajax的url，不写默认是给自己发ajax。当如果写了类似desky/之类域名，会在自己原来的url基础上加，如自己的url是aki，ajax的url是desky/，则向aki/desky/发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.3.1.min.js"></script>
    <script src="/static/setupajax.js"></script>

</head>
<body>
<label for="i1">输入框</label>
{#{% csrf_token %}#}
<input type="text" id="i1">

<script>
    $("#i1").blur(function () {
        let $i1Ele=$(this);
        let name=$i1Ele.val();
        {#let csrfToken=$("[name='csrfmiddlewaretoken']").val();#}
        $i1Ele.next("span").remove();
        $.ajax({
            url: '',
            type: "POST",
            dataType: 'JSON',
            {#data: {"name": name, "csrfmiddlewaretoken":csrfToken},#}
            data: {'name': name},
            success: function (arg) {
                let spanEle=document.createElement("span");
                spanEle.innerText=arg;
                $(spanEle).css("color", "red");
                $i1Ele.after(spanEle);
            }
        })
     } )
</script>
</body>
</html>

后端

注意传给前端ajax的arg，必须是json格式的，Httpresonse要先序列化，用Jsonresponse如果传的不是字典，要加safe=False参数

def my_ajax(request):
    if request.method == "POST":
        data = request.POST.get('name')
        print(data)
        import json
        a = json.dumps('adc')
        # return HttpResponse(a)
        return JsonResponse('abd', safe=False)
    return render(request, 'my_test.html')

跨域方式

一 jsonp

原理：通过<script>发get请求

jsonp只能发get请求

可以不写jsonpCallback参数

不写jsonpCallback参数时，相当于向http://127.0.0.1:8008/service/callback=随机字符串发get请求

有jsonpCallback参数时，相当于向http://127.0.0.1:8008/service/callback=aki&=随机字符串

前端

<script>
    $('.get_service').click(function () {
        $.ajax({
            url: 'http://127.0.0.1:8008/service/',
            type: 'GET',
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'aki',
            success: function (data) {
            }
        })
    })
</script>

后端

def service(request):
     func = request.GET.get('callbacks')
     info = {'name': 'desky', 'age': 17}
     return HttpResponse("%s('%s')" % func, json.dumps(info))

二 cors跨域

后端

def service(request):
    info = {}
    response = HttpResponse(json.dumps(info))
    response["Access-Control-Allow-Origin"] = "*"
    # "*"也可任意指定网址
    return response

前端

正常发ajax就行了

全选和全不选

<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<input type="checkbox" class="choice">
<input type="checkbox" class="choice_iem">
<input type="checkbox" class="choice_iem">
<input type="checkbox" class="choice_iem">
<script>
    $(".choice").click(function () {
        if ($(this).prop("checked")){
            $(".choice_iem").prop("checked", true)
        }else{
            $(".choice_iem").prop("checked", false)
        }
    })
</script>
</body>

三 ajax 跨域

直接<script>引入就行了

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

img绑定点击事件持续向后台发送请求

 <img src="/check_code" onclick='ChangeCode();' id='imgCode'>

scr向127.0.0.1:8888/check_code发送请求

<script type="text/javascript">

    function ChangeCode() {
       var code = document.getElementById('imgCode');
       //   sec 加问号就会再次发送请求
       code.src += '?';
      }
</script>

最让我感到牛B的是每点击一次img就给src加一个?, 还能接着向后台发请求，第一次看这么玩的，服了

127.0.0.1:8888/check_code?????