关于ajax及相关数据传输问题

时间 2019-11-21

原文原文链接

以前整理的ajax相关应用笔记，一直没有时间整理，今天忽然翻到特此将初稿大概的整理了一下，可能有点乱，欢迎指出不足之处。
javascript

jQuery的ajax请求：
complete函数通常不管服务器有无数据返回都会显示（成功或者失败都显示数据）：
 return result

原生的Ajax请求：

 
            // 原生ajax请求数据原理： 
   
    //     var xhr = new XMLHttpRequest() 
   
            // 链接访问地址 
   
    //     xhr.open('GET','http://localhost:8000/shop/jsonApi') 
   
            // 设置一个监听事件得状态 
   
    //     xhr.onreadystatechange = function(e){ 
   
        // 判断请求得状态，达到下面条件便可拿到服务器返回得数据 
   
    //         if(xhr.readyState == 4 && xhr.status==200){ 
   
    //             console.log(xhr) 
   
    //             a=JSON.parse(xhr.responseText) 
   
    //             console.log(a) 
   
        // 获得返回得数据后，能够在这里进行dom操做渲染等 
   
    //         } 
   
    //          
   
    //     } 
   
    //     xhr.send()

jQuery的Ajax请求仿axios（只是将$换成axios）：

第一种方式：

此处为get请求也能够是post请求，参数一是请求的地址，参数二是请求时携带的数据data，then表示

请求成功后返回来的数据为res，在该函数里便可作对dom的一系列操做了，不过返回来的数据要通过json解析，由于在后端的时候数据被转成json格式了

 
           $.get('http://localhost:8000/shop/jsonApi',{'username':'admin','password':'admin'}).then(function(res){ 
  
               console.log(res) 
  
               console.log(JSON.parse(res)) 
  
           })

第二种方式：

参数一位请求的地址后面加一个？以后的都是用户名和密码是post的请求方式，这样就能够不用再写data参数了，下面的和上面的第一种方式同样。

 
   $.get('http://localhost:8000/shop/jsonApi?username=admin&passoword=132345').then(function(res){ 
  
               console.log(res) 
  
               console.log(JSON.parse(res)) 
  
           })

vue里前端渲染数据的方式：

 
   <body> 
  
           <div id="app"> 
  
               <h1>{{productname}}</h1> 
  
               <!--<div class="listItem" v-for='(item,index) in listArr' :key='index'> 
  
                   <h1>{{item.title}}</h1> 
  
                   <img :src="item.pic"/> 
  
               </div>--> 
  
           </div> 
  
           <script type="text/javascript"> 
  
               var app = new Vue({ 
  
                   el:'#app', 
  
                   data:{ 
  
                       productname:'' 
  
                   }, 
  
   //              mounted:function(){ 
  
   //                  var that = this 
  
   //                  fetch('http://127.0.0.1:5000/rank/0').then(function(res){ 
  
   //                      res.json().then(function(res){ 
  
   //                          that.listArr = res.data.list 
  
   //                          console.log(res) 
  
   //                      }) 
  
   //                  }) 
  
   //              } 
  
                   mounted:function(){ 
  
                       var that = this 
  
                       // 方式一：原生的fetch 
  
                       // vue里的fetch是一个ie6原生的可直接访问数据,浏览器二次重写方式 
  
                       fetch('http://localhost:8000/shop/jsonApi').then(function(res){ 
  
                           // Promise对象是一个异步对象res.json()是一个Promise 
  
                           console.log(res.json()) 
  
                           // 下面的才是真正的返回的数据对象 
  
                           res.json().then(function(res){ 
  
                               console.log(res) 
  
                       }) 
  
   //                      res.json().then(function(res){ 
  
   ////                            that.listArr = res.data.list 
  
   //                          console.log(res) 
  
   //                      }) 
  
                           console.log(res) 
  
                       }) 
  
                   } 
  
               }) 
  
               // 方式二jQuery 
  
               // vue里调用jQuery请求数据，并渲染页面 
  
               $.get('http://localhost:8000/shop/jsonApi').then(function(res){ 
  
                   p = JSON.parse(res) 
  
                   // 改变vue里的productname的值而后渲染页面 
  
                   app.productname = p.name 
  
               }) 
  
           </script> 
  
       </body>

django后端请求的数据路由及方法：http://localhost:8000/shop/jsonApi

路由：

在服务端设置可跨域请求条件：

import json
def jsonApi(request):
 p1 = ProductModel.objects.get(pk=2)
 dictObj = {
 'name': p1.name,
 'brief': p1.brief,
 'productImg': str(p1.prodectImg),
 'content': '<h1>图片</h1>'
 }

 print(request.GET.get('username'))
 # ensure_ascii设置中文不乱码
 jsonStr = json.dumps(dictObj,ensure_ascii=False)
 # 设置可跨域请求得条件
 result = HttpResponse(jsonStr)
 result['Access-Control-Allow-Origin'] = '*'
 result['Access-Control-Allow-Headers'] = "Content-Type"

django模式：步骤：在models.py创建class表---——》admin.py注册表---——》views.py实例化表增删改查，而后返回视图---》urls.py设置views.py下每个不一样方法的路由，便可

当post请求页面出现下面报错时：

的必须写一个安全访问参数到发送的数据里： csrfmiddlewaretoken: '{{ csrf_token }}',为固定用法，

 
   function edit(e){ 
  
    console.log(e) 
  
   console.log(e.target.dataset.eid) 
  
   } 
  
   function delt(e){ 
  
    console.log(e) 
  
    var delid=e.target.dataset.did 
  
    console.log(e.target.dataset.did) 
  
    $.post('/houtai/lxl_delt/',{ 
  
    'did':delid, 
  
     csrfmiddlewaretoken: '{{ csrf_token }}', 
  
    }).then(function(res){ 
  
    console.log('tag', res) 
  
    }) 
  
   }

 
   function chaxun(e){ 
  
   var product_name=$('.product_name').val() 
  
   var product_time=$('.product_time').val() 
  
   // console.log(product_name) 
  
   // console.log(product_time) 
  
   data={ 
  
       'product_name':product_name, 
  
       'product_time':product_time, 
  
    headers:{'csrfmiddlewaretoken':'{{ csrf_token }}',},//标注请求头，服务器才能安全让其经过请求 
  
   } 
  
   $.ajax({ 
  
   url:'/houtai/lxl_chaxun/', 
  
   type:'post', 
  
   data:data, 
  
   // headers:{'csrfmiddlewaretoken':'{{ csrf_token }}',}, 
  
   success:function(res){ 
  
       console.log(res) 
  
       // 后端返回路由，重定向路由，服务器再执行页面渲染 
  
   location.href=''+res 
  
   } 
  
   }) 
  
   }

ajax系列及跨域请求解决方案：

ajax:

后端返回数据：

前端：

后端解决跨域请求限制：

设置以后：

在服务端设置可跨域请求条件：

import json
def jsonApi(request):
 p1 = ProductModel.objects.get(pk=2)
 dictObj = {
 'name': p1.name,
 'brief': p1.brief,
 'productImg': str(p1.prodectImg),
 'content': '<h1>图片</h1>'
 }

 print(request.GET.get('username'))
 # ensure_ascii设置中文不乱码
 jsonStr = json.dumps(dictObj,ensure_ascii=False)
 # 设置可跨域请求的条件
 result = HttpResponse(jsonStr)
 result['Access-Control-Allow-Origin'] = '*'
 result['Access-Control-Allow-Headers'] = "Content-Type"

jQuery的ajax请求：
complete函数通常不管服务器有无数据返回都会显示（成功或者失败都显示数据）：
 return result

原生的Ajax请求：

 
            // 原生ajax请求数据原理： 
   
    //     var xhr = new XMLHttpRequest() 
   
            // 链接访问地址 
   
    //     xhr.open('GET','http://localhost:8000/shop/jsonApi') 
   
            // 设置一个监听事件得状态 
   
    //     xhr.onreadystatechange = function(e){ 
   
        // 判断请求得状态，达到下面条件便可拿到服务器返回得数据 
   
    //         if(xhr.readyState == 4 && xhr.status==200){ 
   
    //             console.log(xhr) 
   
    //             a=JSON.parse(xhr.responseText) 
   
    //             console.log(a) 
   
        // 获得返回得数据后，能够在这里进行dom操做渲染等 
   
    //         } 
   
    //          
   
    //     } 
   
    //     xhr.send()

2.axios数据传输：图中选中的data部分要用{pramas：{‘username’:'admin','password':'admin'}}

线面被选中的是不一样的传输数据的方式：

1，

vue数据交互：fetch方式浏览器二次重写