zoukankan      html  css  js  c++  java
  • jquery基础学习之AJAX篇(五)

    理解不深,只知道这么用

    jquery 中ajax的请求方法

    $.ajax({

    url:‘http://...’, //请求网址

    type:'GET', //请求方法

    success:function(data){}//成功后的回调函数,这个data就是拿到的数据

    })

    跨域获取数据 ,jsonp方式跨域,只要规定 dataType:'jsonp'即可

    $.ajax({

    url:`https://api.douban.com/v2/book/search?q=历史`,
    type:'GET',
    dataType:'jsonp',
    success:function (data) { //回调函数
    let aa=JSON.stringify(data)//json转成字符串,才能填充到网页中去
    console.log(data)//获取的数据

      //对数据的处理

    let cc=data.books.filter((item)=>{
    return item.rating.average >8
    }).map((item)=>{
    return {
    title:item.title,
    bookId:item.id,
    publisher:item.publisher
    }
    })
    //console.log(cc)

    }
    })
    }

     

    script 标签跨域


    向头部插入一个script标签,里面写上回调函数名称,然后就可以在回调函数中拿到数据并处理了。


    function showData(data){
    console.log(data)//这个data就是拿到的数据,可以在这里进行相关的处理
    }


    $('head').append('<script src='https://api.douban.com/v2/book/search?q='+'爱情'+'&callback=showData'></scpript>')

    资料参考:https://www.cnblogs.com/chiangchou/p/jsonp.html


    什么是 AJAX?

    AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

    简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

    HTTP 请求:GET vs. POST

    两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。

    GET - 从指定的资源请求数据
    POST - 向指定的资源提交要处理的数据
    GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。

    POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

    跨域

    首先我们需要明白,在页面上直接发起一个跨域的ajax请求是不可以的直接用ajax去请求一个网站,会报错,这时候在head添加一个script src='http://...?callback=funcName'的形式
    然后这个funcName 函数就是接受获取的数据的,他有一个data参数,就是获取来的数据

    如果出现报错 CORS头缺少“Access-Control-Allow-Origin”。 这条需要服务端去解决
    有时候你会发现其它都没问题,出现这个错误:这个错误代表服务端拒绝跨域访问。如果出现这个错误,就需要在服务端设置允许跨域请求。
    response.setHeader("Access-Control-Allow-Origin", "*"); 设置允许任何域名跨域访问

  • 相关阅读:
    ARC081F Flip and Rectangles
    LCA
    Tarjan
    2020牛客暑期多校六
    状压DP
    操作系统
    JAVA期末复习
    D. Yet Another Yet Another Task (区间最值)
    构造
    Codeforces Round #641 (Div. 2)
  • 原文地址:https://www.cnblogs.com/cytheria/p/8747766.html
Copyright © 2011-2022 走看看