zoukankan      html  css  js  c++  java
  • jQuery封装的ajax基础

    知识点一:AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

    知识点二:创建数据请求三种方法

    $.ajax()方法

     $.ajax({
            // 请求的地址
            url:'https://showme.myhope365.com/api/shop/shopGoods/open/hot/list1',
            // 请求方式
            type:'post',
            // 请求参数:get方法可以不写这一项,拼接在网址后头,,,post必须写data数据,传参
            data:{
            },
    //成功回调之前的返回函数。。。成功与否都会显示

     beforeSend: function(){},

            // 成功回调
            success:function(res){
                console.log(res)
            },
    //成功回调函数之后返回的如果没成功也会返回此函数

    complete: function(){}

    //请求失败回调函数
            error:function(error){
                console.log(404)
            }
        })

    $.get() 和$.post()方法

    //get方法

     $.get("网址/地址",{data(可有可无)},function(data,status){

    回调函数

    });

    案例

     $.get('url', function (res) {
           console.log(res);
            }
        )
    post()方法
    post方法

    $.post("网址/地址", {data}, function(data,status){

         回调函数

         });

    案例

        // $.post()方法  与get区别就是多了data参数
        $.post('url', { 参数: 参数值, 参数1: 参数值1 },
            function (res) {
                console.log(res);
            })

    知识点三:load方法

    jQuery load() 方法是简单但强大的 AJAX 方法。

    load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

          // load() 方法从服务器加载数据,并把返回的数据放入被选元素中   div是被选元素
                // $(selector).load(URL,data,callback);
                // live server 插件安装  、、、换个域
                // 协议、域名、端口号只要其中一个不同,就会出现跨域现象
                // 三个参数   第一个是请求回来的内容
                // 第二个是状态
                // 第三个是实例化对象
                $("#box").load("maqiaoqiao.txt", function (responseTxt, statusTxt, xhr) {
                    console.log(responseTxt);
                    console.log(statusTxt);
                    console.log(xhr);
                })
    知识点四:JSON跨域
    判断:如果协议、域名、端口号有一样不匹配,就是跨域
    如果出现跨域现象就会报这种错,,普通的解决办法在VScode上安装live server,,并在运行时点击右下角的Go Live

     json对象里遍历数组 forEach for in

    案例

     // 对象里的数组for循环遍历获取数组元素
        for (var i = 0; i < num.attribute.length; i++) {
            document.write(num.attribute[i]);
        }
        // forEach循环
        // 第一个形参是数组里的元素 
        // 第二个形参是数组元素的索引值
        num.attribute.forEach(function (value, index) {
            document.write(index);
            document.write(value);
        })
        // for in
        // key表示索引
        for (var key in num.attribute) {
            console.log(key)
            document.write(num.attribute[key])
        }
    知识点五:跨域的解决方法
    总结:解决跨域方法:1.jsonp 2.后台配置 3.设置代理
  • 相关阅读:
    Sublime Text3下使用Python,REPL的安装与快捷键设置方法
    2018最新版本Sublime Text3注册码(仅供测试交流使用)
    Simple website approach using a Headless CMS: Part 3
    Simple website approach using a Headless CMS: Part 2
    Simple Website Approach Using a Headless CMS: Part 1
    Top 19 Headless CMS for Modern Publishers
    Headless CMS
    12位至今仍在世的重要工程师,让我们来认识这些程序界的大前辈
    Linux操作系统(第二版)(RHEL 8/CentOS 8)—内容简介—前言—清华大学出版社—张同光
    List of open source real-time operating systems
  • 原文地址:https://www.cnblogs.com/bigbang66/p/13515391.html
Copyright © 2011-2022 走看看