首页 > 代码库 > ajax操作

ajax操作

2024-10-18 00:00:39   212人阅读

一，原生ajax，异步回调。

GET传值方式：　　　

<script>
    function add1() {
    //使用原生ajax需要使用XMLHttpRquest对象
    var obj=new XMLHttpRequest();//声明一个XML对象obj
    obj.onreadystatechange=function () {
        //回调函数，数据发生改变时触发操作
        if(obj.readyState==4){
            //readyState有0到4五种状态，4代表传值完成
            alert(obj.responseText)//服务器返回值
        }
    };
    obj.open("GET",‘/add2/?num1=1&num2=2‘);//创建一种连接请求，使用GET方式，参数使用/add2/?num1=1&num2=2传递
    obj.send();//发送数据
    }

</script>

 

POST传值：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
    alert(xhr.responseText);
    }
};
xhr.open(‘POST‘,‘/add2/‘);
xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
//()
xhr.send("i1=12&i2=19");

 

基于ajax的文件上传操作：

 

<body>

<input type="file" id="pic">
<input type="button" value="http://www.mamicode.com/上传" onclick="upload1()">
<div id="container1"></div>

</body>
<script>
    function upload1() {
        var pic=document.getElementById("pic").files[0];
        console.log(pic);
        var formdata=http://www.mamicode.com/new FormData();//使用FormData声明一个文件对象
        formdata.append(‘tu‘,pic);//添加一个字典值到对象
        var obj=new XMLHttpRequest();
        obj.onreadystatechange=function () {
            if(obj.readyState==4){
                var file_path=obj.responseText;
                var tag=document.createElement("img");
                tag.src="/"+file_path;
                document.getElementById("container1").appendChild(tag);
            }
        };
        obj.open("POST",‘/upload/‘);
        obj.send(formdata);//发送formdata对象到后台
    }
</script>

后台处理代码：

def upload(request):
    if request.method=="GET":
        return render(request,"upload.html")
    else:
        #python接受文件需要使用FILES方法
        pic=request.FILES.get("tu")
        #获取到值后是一个对象，可以调用.name与.size方法查看文件名称及大小
        file_path=os.path.join("static",pic.name)
        #打开文件写入本地，注意是使用bytes
        with open(file_path,"wb") as f:
            for chunk in pic.chunks():#chunks方法是可以获取到文件内容
                f.write(chunk)
        return HttpResponse(file_path)

 

二，JQuery的ajax

一，post与get传值

<script src="http://www.mamicode.com/static/js/jquery-3.2.1.js"></script>
<script>
    $("#btnt").click(function () {
        var user=$("#tname").val();
        var passwd=$("#tpwd").val();
        var token= $.cookie("csrftoken");
        $.ajax( {
            url:‘/app01/load.html‘,
            type:‘POST‘,
            headers:{‘X-CSRFToken‘:token},
            data:{"user":user,
                "pwd":passwd
           },
            success:function (arg) {
                arg=JSON.parse(arg);
                if(arg.res=="ok"){
                    alert("登录成功");
                    if(arg.gender=="男"){
                        location.href="boy.html"
                    }else if(arg.gender=="女"){
                        location.href="gril.html"
                    }
                }else{

                    $("#tname").val("");
                    $("#tpwd").val("");
                }
            }
        })
    })
</script>

基于JQuery的文件上传

        function upload(){
            var formData = http://www.mamicode.com/new FormData();
            formData.append(‘k1‘,‘v1‘);
            // formData.append(‘fafafa‘,document.getElementById(‘i1‘).files[0]);
            formData.append(‘fafafa‘,$(‘#i2‘)[0].files[0]);
            // $(‘#i2‘) -> $(‘#i2‘)[0]
            // document.getElementById(‘i1‘) -> $(document.getElementById(‘i1‘))

            $.ajax({
                url: ‘/upload/‘,
                type: ‘POST‘,
                data: formData,
                contentType:false,
                processData:false,
                success:function(arg){
                    var tag = document.createElement(‘img‘);
                    tag.src = "/"+ arg;
                    $(‘#container2‘).append(tag);
                }
            })
        }

 

三，伪ajax操作

<h1>伪 Ajax上传文件</h1>
    <form id="f1" method="POST" action="/upload/" target="ifr" enctype="multipart/form-data">
        <iframe id="ifr" name="ifr" style="display: none"></iframe>
        <input type="file" name="fafafa" />
        <a onclick="upload3();">上传</a>
    </form>
    <div id="container3"></div>      

　　　　　function upload3(){
            document.getElementById(‘ifr‘).onload = loadIframe;
            document.getElementById(‘f1‘).submit();

        }
        function loadIframe(){
            var content = document.getElementById(‘ifr‘).contentWindow.document.body.innerText;
             var tag = document.createElement(‘img‘);
            tag.src = "/"+ content;
            $(‘#container3‘).append(tag);
        }

 

ajax操作


联系
我们