后台发送数据的3种形式

向后端发送数据，要求不能刷新页面，所以，一般采用ajax或者是iframe的形式，其中ajax又分为2种方式：
a.用原生XmlHttpRequest类进行发送
b.用jquery给我们的方法来发送

1. Ajax发送（jquery形式）：

$.ajax({
	url:'',
	type/method:'get/post',
	data:{},
	dataType:'json',
	success:function(arg){}(发送成功回调函数)
	error:function(arg){}(发送失败回调函数)
	})

这是jquery给我们封装好的方法，最常用的几个字段

2 . 原生ajax

在我们不能使用jquery的时候就会用到原生ajax请求，基于js的XmlHttpRequest对象来进行操作
1.首先定义一个新对象
2.构造一个状态改变的函数，一旦状态改变执行某些功能（相当于回调函数）
3.给予目标地址参数以及发送方法
4.发送数据
5.完成发送，执行回调函数

那么什么是XMLHttpRequest对象呢？

XMLHttpRequest 对象用于在后台与服务器交换数据。

创建XMLHttpRequest对象的方法：

var xhr = new XMLHttpRequest();

具体方法，请点击
GET请求的发送方式与POST请求略有不同，GET请求，要将发送的数据写在地址上，这是及其不安全的，所以一般采用POST方法，需要在发送数据之前带上请求头：
GET方式：

        function Ajax2() {
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    console.log(xhr.responseText)
                }
            };
            xhr.open('get','/index?p=123');
            xhr.send(null)
        }

POST:

        function Ajax4() {
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    console.log(xhr.responseText)
                }
            };
            xhr.open('post','/index/');
            xhr.setRequestHeader('Content-Type',"application/x-www-form-urlencoded: charset-UTF-8")
            xhr.send('p=456')
        }

（所有的请求头格式基本一直）

3. Iframe伪造Ajax请求：

通过target将form和iframe组合起来，form得到的返回值将会直接返回到iframe，在页面种显示

为什么要用a标签进行提交而不是用input的submit，原因在于我们要给这个提交绑定事件，来操作iframe的内容 提交

Tips：我在这里一直遇到了一个问题，希望能帮助到大家。最开始我的代码是这样的：

	
    

        

        提交
    
    

不知道有没有看出什么不同，就是上面代码中form表单中的id出现在了a标签上，这样就会导致一个问题，你点提交之后，会报错，提示.submit() is not a function，查阅了大量资料，大多数人都是回答不能submit重名，然而我的代码中并没有submit重名，后来发现是id的位置不正确，因为要对表单进行提交，所以我们要对form进行绑定和提交，所以a标签并没有.submit()方法。

回归正题：

iframe标签内的数据与别的标签不同，数据出现在一个特殊的document中：

所以我们要找到这个标签以及内容的话，就要用到上面写得寻找方式。

对于如何对iframe绑定事件，我们这里绑定的是onload()加载事件，数据没有到达标签属于未加载，一收到数据就会执行这个事件，事件发生在数据显示之前，所以可以在显示之前进行操作，满足需求。为什么不把onload事件直接绑定在iframe中的原因是：由于JS是由上到下执行的，如果直接绑定，会报错，因为浏览器还没有找到这个事件的函数。

某些网站上的上传图片功能就是用iframe来实现的，如何进行图片的上传，以及从django中发送到前端呢？
方法一：（简单粗暴，直接发图片到前端）

form里面发送文件的内容不再赘述，django中如何接收文件和写入本地，见博客中的上传，如何发送二进制图片是重点

return HttpResponse(图片名, content_type="image/png")
按照这个格式就可以给前端发送图片，这种方法并不常用，一般会给前端发送文件地址，注意要用json进行序列化
将图片地址封装在字典里，而且前端也要进行反序列化，否则只会接收到字符串而非字典

方法二：
我们可以下载完图片之后，要获取图片在本地的地址，一般是在static文件夹中，只需要获取相对地址即：static/xxx/。Tips：如果要在本地创建文件夹存放不同的文件，并且想让浏览器可以访问，必须放在static下（目前还没学到如何单独创建文件夹可以访问），即如果你想创建一个image文件夹保存突变，你的地址是：localhost/static/image/xxxx.jpg，这样就可以直接在浏览器访问了。
利用iframe的特点，我们可以将图片地址发送给前端，由iframe接收，然后我们获得iframe里的图片地址,这里获取信息一定要在onload事件里面获取，直接查找iframe标签是无法获得内容的创建img标签将地址放入就可以展示图片了：

    
    

        
    
    
预览