实现Ajax提交数据的三种方式

Ajax提交数据的三种方式

Ajax发送请求的特点是不刷新页面，很常用

一，原生Ajax

实现方式：使用 浏览器中的XmlHttpRequest对象来完成请求

优点：不依赖插件，直接快捷
缺点：代码叫复杂，并且有的低版本浏览器不支持

url关系：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('ajax1/', views.ajax1),
]

views函数：

def index(request):
    return render(request,"ajax1.html")

def ajax1(request):
    return HttpResponse("这是原生Ajax")

html文件

<h1>这是原生Ajax</h1>
<button id ="ajax1">提交</button>
<script>
    document.getElementById("ajax1").onclick=function () {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function () {
            if (xhr.readyState==4){
                alert(xhr.responseText)
            }
        };
        xhr.open("GET","/ajax1");  //GET请求
        xhr.send(null)
        //xhr.open("POST","/ajax1");  //POST请求
        //xhr.send("p=456")
        //如果请求方式是POST,要加上下面的请求头
        //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        //POST方式提交数据也发送到了request.body,Django要根据请求头将数据再解析到request.POST
    }
</script>

二，jQuery下的ajax

实现方式：用JavaScript的类库jQuery对浏览器对象XMLHttpRequest 或 ActiveXObject做好了上层封装

优点：简单快捷
缺点：依赖插件，影响性能

<h1>这是Jquery下的ajax</h1>
<button id ="ajax2">提交</button>
<script src="/static/jquery-3.1.1.min.js"></script>
<script>
    $("#ajax2").click(function () {
        $.ajax({
            url:"/ajax2",
            method:"GET",
            data:{"p":123},
            success:function (arg) {
                var ele=JSON.parse(arg);
                if (ele.status){
                    alert(ele.message)
                } else {
                    alert("操作失败")
                }
            },
            error:function () {
              alert("发送失败")
            }
        })
    })
</script>

三，"伪"Ajax （网站最常用）

实现方式：html里的iframe标签和form表单

优点：兼容性最好
缺点：暂无

<h1>这是伪ajax</h1>
<iframe id="iframe" name="ifra" style="display: none"></iframe>
<form action="/ajax3" method="post" target="ifra">
    <input type="text" name="name">
    <input type="submit" value="t提交">
</form>
<script>
    document.getElementById("iframe").onload=function () {
    //后台返回数据后，iframe标签里重新生成一个hlml，数据在html的body标签里
        var ele=this.contentWindow.document.body.innerHTML; //取到iframe标签的内容
        //$(this).contents().find("body").text()   jQurey方式查找
        var data=JSON.parse(ele)   //依照需求反序列化
        if(data.status){
            alert(data.message)
        }else{
            alert("发送失败")
        }
    }
</script>

以上提交的都是字符串，字典里面套字典需要序列化。那么如果是文件呢？
首先在form表单放入<input type="file">，form表单直接打包处理，
那伪类ajax就自然解决了

那剩下的两种方式怎么做呢？
它们两个是一样的，都是需要借助FormData对象

原生Ajax上传文件：

<h1>这是原生Ajax</h1>
<input type="file" id="img">
<button id ="ajax1">上传</button>
<script>
    document.getElementById("ajax1").onclick=function () {
        var date=new FormData();
        date.append("k1","v1");
        date.append("k2","v2");
        date.append("k3",document.getElementById("img").files[0])
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function () {
            if (xhr.readyState==4){
                alert(xhr.responseText)
            }
        };
        xhr.open("POST","/ajax1/");  //GET请求
        xhr.send(date)
    }   //用FormData对象提交数据，提交方式就是POST，也不用另加请求头
</script>

jQuery下的ajax上传文件：

<h1>这是Jquery下的ajax</h1>
<input type="file" id="img">
<button id ="ajax2">提交</button>
<script src="/static/jquery-3.1.1.min.js"></script>
<script>
    $("#ajax2").click(function () {
        var data=new FormData();
        data.append("k1","v1");
        data.append("k2","v2");
        data.append("k3",$("#img").files[0]);
        $.ajax({
            url:"/ajax2/",
            method:"POST",
            data:data,
            success:function (arg) {
                var ele=JSON.parse(arg);
                if (ele.status){
                    alert(ele.message)
                } else {
                    alert("操作失败")
                }
            },
            error:function () {
              alert("发送失败")
            },
            processData: false,  // tell jQuery not to process the data
            contentType: false,  // tell jQuery not to set contentType
        })
    })
</script>

用FormData对象作为数据传递，记得加上两个参数 processData: false, contentType: false, 改为false

小总结：
1.没有form表单的封装，需要用FormData对象来上传文件，当然只上传数据也可以用
2.FormData对象中添加数据：append（"键名"：键值）
3.获取到文件的方式：$("#img").files[0]

再补充一个后台接收到文件保存到本地方法：

def ajax1(request):
    print(request.GET)
    print(request.POST)
    print(request.FILES)
    file=request.FILES.get("k3")
    print(file.name)
    print(file.size)
    f=open(file.name,"wb")
    for line in file.chunks:
        f.write(line)
    f.close()
    return HttpResponse("这是原生Ajax")

**

写一个选择图片加预览效果：

**
思路：<input type="file" >标签内容发生变化后，自动上传到后台，后台接收到之后存到本地，把路径再发给前端

HTML部分：

<h1>这是伪ajax</h1>
<iframe id="iframe" name="ifra" style="display: none"></iframe>
<form id= "fm" action="/ajax3/" method="post" target="ifra" enctype="multipart/form-data">
{#    taget建立连接，把form表单数据用iframe发送#}
    <input type="file" name="k3" id="autosubmit">
    <div id="preview"></div>
</form>
{#<script src="/static/jquery-3.1.1.min.js"></script>#}
<script>
    document.getElementById("autosubmit").onchange=function(){   //image标签绑定onchange，内容变化就触发
        console.log(8888);
        document.getElementById("fm").submit();};
    document.getElementById("iframe").onload=function () {
        var ele=this.contentWindow.document.body.innerHTML; //取到iframe标签的内容
        //$(this).contents().find("body").text()   jQurey方式查找
        var data=JSON.parse(ele);   //依照需求反序列化
        var tag=document.createElement("img"); //创建一个新的image标签
        tag.src="/"+data.path;       //从后台本地取照片
        {#$("#preview").empty().append(tag)#}    //jQuery方式
        document.getElementById("preview").innerHTML='' ;
        document.getElementById("preview").appendChild(tag)
    }
</script>

后台部分：

def ajax3(request):
    import os,uuid,json
    nid=str(uuid.uuid4())  #随机产生一段字符串
    req = {"status": True, "path":None,"message": "伪ajax"}
    file = request.FILES.get("k3")
    file_path=os.path.join("static",nid+file.name)
    f = open(file_path, "wb")
    for line in file.chunks():
        f.write(line)
    f.close()
    req["path"]=file_path
    return HttpResponse(json.dumps(req))