Django框架中的Ajax操作 原生ajax发送GET、POST请求 浏览器兼容处理

鳄鱼君

发表文章数:525

热门标签

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » Python教程 » Django框架中的Ajax操作 原生ajax发送GET、POST请求 浏览器兼容处理

前面我们上传文件采用的时form表单的形式,我们也可以使用ajax来实现文件的上传。ajax包括原生的ajax、jquery、伪ajax三种。

Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)。

XmlHttpRequest对象的主要方法:

1. void open(String method,String url,Boolen async)
   用于创建请求
    
   参数:
       method: 请求方式(字符串类型),如:POST、GET、DELETE...
       url:    要请求的地址(字符串类型)
       async:  是否异步(布尔类型)
 
2. void send(String body)
    用于发送请求
 
    参数:
        body: 要发送的数据(字符串类型)
 
3. void setRequestHeader(String header,String value)
    用于设置请求头
 
    参数:
        header: 请求头的key(字符串类型)
        vlaue:  请求头的value(字符串类型)
 
4. String getAllResponseHeaders()
    获取所有响应头
 
    返回值:
        响应头数据(字符串类型)
 
5. String getResponseHeader(String header)
    获取响应头中指定header的值
 
    参数:
        header: 响应头的key(字符串类型)
 
    返回值:
        响应头中指定的header对应的值
 
6. void abort()
 
    终止请求

那么现在创建一个ajax路由规则,定义视图函数并创建ajax模板,json路由用于接收信息:

ajax视图函数
def ajax(request):
    return render(request,'ajax.html')
json视图函数
def json(request):
    reg={'status':True,'data':None}  #定义一个字典
    import json  #转换为字符串
    return HttpResponse(json.dumps(reg))
ajax.html
<input type="button" value="ajax提交" onclick="Ajax();">
<script>
    function Ajax() {
        var xhr=new XMLHttpRequest(); /*创建对象*/
        xhr.open('GET','/json/', true)  /*get方式 提交到index页面 异步*/
        xhr.send("name=root ; pwd=123");  /*以字符串的形式发送数据  注意分号*/
    }
</script>

XmlHttpRequest对象的主要属性:

    
1. Number readyState
   状态值(整数)
 
   详细:
      0-未初始化,尚未调用open()方法;
      1-启动,调用了open()方法,未调用send()方法;
      2-发送,已经调用了send()方法,未接收到响应;
      3-接收,已经接收到部分响应数据;
      4-完成,已经接收到全部响应数据;
 
2. Function onreadystatechange
   当readyState的值改变时自动触发执行其对应的函数(回调函数)
 
3. String responseText
   服务器返回的数据(字符串类型)
 
d. XmlDocument responseXML
   服务器返回的数据(Xml对象)
 
4. Number states
   状态码(整数),如:200、404...
 
5. String statesText
   状态文本(字符串),如:OK、NotFound...

修改ajax.html页面的js函数:

<input type="button" value="ajax提交" onclick="Ajax();">
<script>
    function Ajax() {
        var xhr=new XMLHttpRequest(); /*创建对象*/
        xhr.open('GET','/json/', true)  /*get方式 提交到index页面 异步*/
        xhr.onreadystatechange=function () {    /* readyState中状态发生变化的时候执行这个函数 */
                if(xhr.readyState===4){
                    //接收完毕
                    console.log(xhr.responseText);  //接受服务器返回的字符串 {'status':True,'data':None}
                 }
       }
        xhr.send("name=root ; pwd=123");  /*以字符串的形式发送数据  注意分号*/
    }
</script>

以上是发送的get请求,如果想要发送post请求,使用以上代码在服务器端就拿不到post的数据,这里需要设置请求头:

<input type="button" value="ajax提交" onclick="Ajax();">
<script>
    function Ajax() {
        var xhr=new XMLHttpRequest(); /*创建对象*/
        xhr.open('POST','/json/', true)  /*get方式 提交到index页面 异步*/
        xhr.onreadystatechange=function () {    /* readyState中状态发生变化的时候执行这个函数 */
                if(xhr.readyState===4){
                    //接收完毕
                    var obj=JSON.parse(xhr.responseText)
                 }
       }
       // 设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        xhr.send("name=root ; pwd=123");  /*以字符串的形式发送数据  注意分号*/
    }
</script>

如果你没有设置请求头,那么在服务器后台就拿不到数据,一般出错都在这里,需要注意。

跨浏览器支持

XmlHttpRequest
IE7+, Firefox, Chrome, Opera, etc.
ActiveXObject("Microsoft.XMLHTTP")
IE6, IE5

对于浏览器兼容就是XMLHttpRequest这句,我们可以写为window.XMLHttpRequest,具体可以进行一个判断:

<input type="button" value="ajax提交" onclick="Ajax();">
<script>
     function getXHR(){
            var xhr = null;
            if(XMLHttpRequest){  //如果存在
                xhr = new XMLHttpRequest();
            }else{  //如过没有
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;

        }
    function Ajax() {
        var xhr=getXHR();
        xhr.open('POST','/json/', true)  /*get方式 提交到index页面 异步*/
        xhr.onreadystatechange=function () {    /* readyState中状态发生变化的时候执行这个函数 */
                if(xhr.readyState===4){
                    //接收完毕
                    var obj=JSON.parse(xhr.responseText)
                 }
       }
       // 设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        xhr.send("name=root ; pwd=123");  /*以字符串的形式发送数据  注意分号*/
    }
</script>

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《Django框架中的Ajax操作 原生ajax发送GET、POST请求 浏览器兼容处理》 发布于2020-04-27

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

1 + 1 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册