Ajax全套

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_34178244

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量89

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python json ViewUI

原文链接：http://www.cnblogs.com/lhqlhq/p/9202244.html

博客主要介绍了Ajax相关知识。包括偷偷向后台发请求的方式，如手动使用XMLHttpRequest、借助jQuery，还有‘伪’Ajax的iframe标签和form表单。还阐述了Ajax上传文件的方法，有jQuery和原生方式，可利用formData对象封装数据，也介绍了Iframe+Form方式。

一、Ajax，偷偷向后台发请求
- XMLHttpRequest
- 手动使用
- jQuery
- “伪”Ajax
- iframe标签
- form表单

二、Ajax上传文件
- jQuery
- 原生
以上两种方式可利用formData对象，来封装用户提交的数据

- Iframe+Form

******Iframe+Form*******

url文件

from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('index.html/', views.index),
    path('ajax1.html/', views.ajax1),
]

views文件

from django.shortcuts import render,HttpResponse

# Create your views here.

def index(request):

    return render(request,'index.html')


def ajax1(request):
    print(request.GET)
    print(request.POST)

    return HttpResponse('')

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            display: inline-block;
            padding: 5px 10px;
            color: orangered;
        }
    </style>
</head>
<body>
    <h1>Ajax全套</h1>
    <h3>1.Ajax发送GET请求</h3>
    <div>
        <a href="" class="btn" onclick="AjaxSubmit1();">点我1</a>
        <a href="" class="btn" onclick="AjaxSubmit2();">点我2</a>
    </div>

    <h3>2.Ajax发送POST请求</h3>
    <div>
        <a href="" class="btn" onclick="AjaxSubmit3();">点我3</a>
        <a href="" class="btn" onclick="AjaxSubmit4();">点我4</a>
    </div>

    <h3>3 伪ajax</h3>
    <div>
        <h6>基于Iframe+Form表单的ajax</h6>

        <iframe src="" frameborder="1px" id="iframe" name="ifra"></iframe>
        <form action="/ajax1.html/" id="fm" method="post" target="ifra">
            <input type="text" name="root" value="111111">
            <a href="" onclick="AjaxSubmit5()">提交</a>

{#            <input type="submit" value="提交">#}
        </form>



    <h3>4 上传文件</h3>
        <input type="file" id="img">
        <a href="" class="btn" onclick="AjaxSubmit6()">上传1</a>
        <a href="" class="btn" onclick="AjaxSubmit7()">上传2</a>

    </div>


    <iframe style="display: none" id="iframe1" name="ifra1"></iframe>
    <form id="fm1" action="" method="POST" enctype="multipart/form-data" target="ifra1">
        <input type="text" name="k1" />
        <input type="text" name="k2" />
        <input type="file" name="k3" />
        <a onclick="AjaxSubmit8()">提交</a>
    </form>


    <script src="/static/js/jquery-3.3.1.js"></script>
    <script>
        function AjaxSubmit1() {
            $.ajax({
                url:'/ajax1.html',
                type:'GET',
                data:{'p':123},
                success:function (arg) {
                    console.log(arg)
                }
            })
         }

        function AjaxSubmit2() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    //接受完毕，服务器返回的数据
                    {#xhr.responseText //返回的文本信息#}
                    console.log(xhr.responseText)
                }
            };
            xhr.open('GET','/ajax1.html?p=123456');

            xhr.send(null);
         }

        function AjaxSubmit3() {
            $.ajax({
                url:'/ajax1.html/',
                type:'POST',
                data:{'p':5555},
                success:function (arg) {

                }

            })
         }

        function AjaxSubmit4() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    console.log(xhr.responseText)
                }
            };
            xhr.open('POST','/ajax1.html/');
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            xhr.send('p=66666');
         }

        function AjaxSubmit5() {
            document.getElementById('iframe').onload = reloadIframe;
            document.getElementById('fm').submit();
         }
        function reloadIframe() {
             var content = this.contentWindow.document.body.innerHTML;
             var obj = JSON.parse(content);
             if(obj.status){
                 alert(obj.message)
             }
         }



        function AjaxSubmit6() {
             var data = new FormData();
             data.append('k1','v1');
             data.append('k2','v2');
             data.append('k3',document.getElementById('img').files[0]);

             $.ajax({
               url:'ajax1.html/',
               type:'POST',
               data:data,
               success:function (arg) {
                   console.log(arg)
               },
                processData: false,  // tell jQuery not to process the data
                contentType: false  // tell jQuery not to set contentType

             })
         }

        function AjaxSubmit7() {
             var data = new FormData();
             data.append('k1','v1');
             data.append('k2','v2');
             data.append('k3',document.getElementById('img').files[0]);

             var xhr = new XMLHttpRequest();
             xhr.onreadystatechange = function () {
                 if(xhr.readyState == 4){
                     console.log(xhr.responseText);
                 }
             };
             xhr.open('POST','/ajax1.html/');
             xhr.send(data);
         }


        function AjaxSubmit8() {
            document.getElementById('iframe1').onload = reloadIframe1;
            document.getElementById('fm1').submit();
        }
        function reloadIframe1() {
            var content = this.contentWindow.document.body.innerHTML;
            var obj = JSON.parse(content);
            console.log(obj);
        }



    </script>


</body>
</html>

转载于:https://www.cnblogs.com/lhqlhq/p/9202244.html