Ajax的基本使用

1.一个简单的ajax使用

<h4>index页面</h4>
<button class="btn">提交ajax</button>
<p class="show"></p>

        $(".btn").click(function () {
           $.ajax({
            url:"/handle_ajax/",
            type:"get",
            success:function (response) {
                console.log(response);
                $(".show").html(response)
            }
        })
        });

2.带参数、数据格式为json的ajax请求

<input type="text" id="num1">+<input type="text" id="num2">=<input id="ret" type="text"><button class="cal">计算</button>
{% csrf_token %}

        $(".cal").click(function () {
            var num1 = $("#num1").val();
            var num2 = $("#num2").val();
            $.ajax({
                url:"/cal/",
                type:"post",
                contentType:"json",
                data:JSON.stringify({
                    num1:num1,
                    num2:num2,
                    //csrfmiddlewaretoken:$("input[type=hidden]").val()
                }),
                success:function (response) {
                    $("#ret").val(response)
                }
            })
        });

def cal(request):

    # num1 = request.POST.get("num1")
    # num2 = request.POST.get("num2")
    # ret = int(num1)+int(num2)
    print(request.POST)
    print(request.body)
    num1 = json.loads(request.body.decode("utf8")).get("num1")
    num2 = json.loads(request.body.decode("utf8")).get("num2")
    ret = int(num1)+int(num2)
    return HttpResponse(str(ret))

                headers:{
                    "X-CSRFToken":$.cookie('csrftoken')　　前提需要引入文件
                },
可以通过

3.contentType

<form action="/name/" method="post" enctype="application/x-www-form-urlencoded">
    {% csrf_token %}
    姓名 <input type="text" name="user">
    <input type="submit">
</form>

4.文件上传

<h4>4 form表单形式的文件上传</h4>
<form action="/file_put/" method="post" enctype="multipart/form-data">
    姓名 <input type="text" name="user">
    文件 <input type="file" name="file_obj">
    <input type="submit">
</form>
<hr>
<h4>5 Ajax形式的文件上传</h4>
<form>
    姓名 <input type="text" id="user">
    文件 <input type="file" id="file" name="file_obj">
    <input type="button" class="filebtn" value="提交">
    <p class="msg"></p>
</form>

        $(".filebtn").click(function () {
            var formdata = new FormData();
            formdata.append("file_obj",$("#file")[0].files[0]);
            formdata.append("user",$("#user").val());
            $.ajax({
                url:"/file_put/",
                type:"post",
                //ajax上传文件必备参数
                contentType:false,  //不设置内容类型
                processData:false,  //不处理数据
                data:formdata,
                success:function (response) {
                    if(response=="OK"){
                        $(".msg").html("上传成功!")
                    }
                }
            })
            
        })

import os
from ajiakesi import settings
def file_put(request):

    print(request.POST)
    print(request.FILES)
    file_obj = request.FILES.get("file_obj")
    file_name = file_obj.name
    path = os.path.join(settings.BASE_DIR,"media","img",file_name)
    with open(path,"wb") as f:
        for line in file_obj:
            f.write(line)
    return HttpResponse("OK")

5.登录

    <form>
        {% csrf_token %}
        用户名 <input type="text" id="user">
        密码 <input type="password" id="pwd">
        <input type="button" id="login_btn" value="提交"><span class="error"></span>
    </form>

        $(function () {
            $("#login_btn").click(function () {
                $.ajax({
                    url:"/login/",
                    type:"post",
                    data:{
                        user:$("#user").val(),
                        pwd:$("#pwd").val(),
                        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                    },
                    success:function (response) {
                        console.log(response);
                        var res = JSON.parse(response);
                        if (res.user){
                            //登录成功
                            location.href="/index/"
                        } else {
                            //登录失败
                            $(".error").html(res.error).css("color","red");
                            setTimeout(function () {
                                $(".error").html("" +
                                    "")
                            },1000)

                        }
                    }
                })
            })
        })

def login(request):
    res = {"user":None,"error":""}
    if request.method == "POST":
        user = request.POST.get("user")
        pwd = request.POST.get("pwd")
        user_obj = UserInfo.objects.filter(user=user,pwd=pwd).first()
        print(user_obj)
        if user_obj:
            res["user"] = user
        else:
            res["error"] = "用户名或密码错误!"
        return HttpResponse(json.dumps(res))
    else:
        return render(request,"login.html")