• 【jQuery】jQuery中如何发送ajax请求以及解决跨域问题_10

    目录

    ❣️ ajax

    ❣️ 跨域

    ❣️ 总结：jQuery简化版函数3大特点 

    ❣️ 总结：$()共有4种

    ❣️ 总结：知识点提炼

    🆙【前文回顾】👉  如何添加自定义函数及封装自定义插件_09

    ​  

    ❣️ ajax

    1. $.ajax({

             url:"服务器端接口地址",

             type:"get或post",

             data:{ 参数名: 参数值, ... ... },  // 要发送给服务器的参数

             dataType:"json", // 自动调用JSON.parse()

             success:function(result){  // 等效于之前的onreadystatechange

                       // 仅在成功收到响应结果后自动执行！

                      // 今后，只要希望在ajax获得数据后才自动执行的代码，必须都要放在success中！

                     // result会自动获得ajax接收到的响应结果，被JSON.parse()转换后的直接可用的数组或对象！

             }

      })

    2. 示例：使用$.ajax()函数一句话向服务器发送请求接收响应

    ​

     15_$_ajax.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>Documenttitle>
    7.   <script src="js/jquery-1.11.3.js">script>
    8. head>
    9. <body>
    10.   <script>
    11.     //从新浪云服务器获取首页6个商品
    12.     $.ajax({
    13.       url:"http://xzserver.applinzi.com/index",
    14.       type:"get",
    15.       dataType:"json",
    16.       //              响应结果
    17.       //                 ↓
    18.       success:function(result){
    19.         console.log(result);
    20.       }
    21.     });
    22.     //从新浪云服务器获取5号商品的详细信息
    23.     $.ajax({
    24.       url:"http://xzserver.applinzi.com/details",
    25.       type:"get",
    26.       data:{lid:5},
    27.       dataType:"json",
    28.       //              响应结果
    29.       //                 ↓
    30.       success:function(result){
    31.         console.log(result);
    32.       }
    33.     })
    34.     //去新浪云服务器验证当前用户是否能登录成功
    35.     $.ajax({
    36.       url:"http://xzserver.applinzi.com/users/signin",
    37.       type:"post",
    38.       data:{uname:"dingding", upwd:"123456"},
    39.       dataType:"json",
    40.       //              响应结果
    41.       //                 ↓
    42.       success:function(result){
    43.         console.log(result);
    44.       }
    45.     })
    46.   script>
    47. body>
    48. html>

    运行结果:
     

    ​

    ❣️ 跨域

    1. 什么是跨域: 一个网站下的网页，使用了另一个网站的资源

    2. 包括: 5种:

             (1). 域名不同: http://www.a.com  -> http://www.b.com

             (2). 子级域名不同:

             http://oa.tedu.cn  ->  http://hr.tedu.cn

             (3). 端口不同:

             http://localhost:5050 -> http://localhost:3000

             (4). 协议不同:

             http://12306.cn  ->  https://12306.cn

             (5). 即使同一台主机，同一个域名，IP与主机名互访也算跨域:

             http://localhost:3000 -> http://127.0.0.1:3000

              主机名                 IP

    3. 可以随意跨域的元素: