• console access jquery--------json


    jq = document.createElement('script');  
    jq.src = "file:///home/liulqiang/jquery.js";  
    document.getElementsByTagName('head')[0].appendChild(jq);  
    jQuery.noConflict();

    在WEB数据传输过程中,json是以文本,即字符串的轻量级形式传递的,而客户端一般用JS操作的是接收到的JSON对象,所以,JSON对象和JSON字符串之间的相互转换、JSON数据的解析是关键。

    先明确2个概念例如:

    JSON字符串:

    var str1 = '{ "name": "deyuyi", "sex": "man" }';

    JSON对象:

    var str2 = { "name": "deluyi", "sex": "man" };

    可以简单这样理解:

    JSON对象是直接可以使用JQuery操作的格式,如C#中可以用对象(类名)点出属性(方法)一样;

    JSON字符串仅仅只是一个字符串,一个整体,不截取的话没办法取出其中存储的数据,不能直接使用,除非你只想alert()他;

     

    一、ajax请求


     1、load(url, [data], [callback])

        概述:加载远程的HTML文件代码,并插入到指定的DOM节点中。

        参数:url:待装入 HTML 网页网址。

        data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

        callback:载入成功时回调函数。

        可以只传入一个参数,表示加载一个静态的HTML代码片段。

    $("#div1").load("load.html");

      2、$.ajax():是JQuery最底层的ajax函数,参数接收一个大对象。对象里面的属性和方法,表示ajax请求的相关设置:

         (1)url : 请求远程文件的路径

        (2)type: Ajax请求的类型,可选值 get/post

        (3)data: 对象格式。向后台发送一个对象,表示传递的数据。

           常用与type为"post"的请求方式;如果type为"get",可以直接使用?追加在URL的后面。

        (4)dataType :预期后台返回什么类型的数据。 

            "text"-字符串 "json"-JSON对象

        (5)success: 请求成功的回调函数。参数接受一个data,表示后台返回的数据。

        (6)error : 请求失败的时候的回调函数

        (7)statusCode : 接受一个对象,对象的键值对是status状态码和对应的回调函数,表示当请求状态码是对应数字时,执行具体的操作函数。

          200-正常请求成功     404-页面没有找到    500-服务器内部错误。

    复制代码
    $.ajax({
        url : "http://localhost/json.php?name='zhangsan'&age=12",
        type: "post",
        data : {
            name : "李四",
            age : 28
            },
        dataType : "json",
        success : function(data){
        // JQuery中吧JSON字符串转成JSON对象
            var jsons = $.parseJSON(data);
            console.log(jsons);
        },
        error: function(){
            alert("请求失败啦!");
        },
        statusCode:{
            "404":function(){
                alert("404表示页面没有找到");
            },
            "500":function(){
                alert("500表示服务器内部错误");
            },
            "200":function(){
                alert("200表示请求成功");
            }
        }
    });
    复制代码

      3、$.get();  $.post(); 这两个函数,是在$.ajax()的基础上进行封装而来。可以直接默认发送get请求或post请求;    

        接受四个参数:

    ① 请求的URL路径。 相当于$.ajax()里面的url;
    ② 向后台传递的数据。 相当于$.ajax()里面的data;
    ③ 请求成功的回调函数。 相当于$.ajax()里面的success;
    ④ 预期返回的数据类型。 相当于$.ajax()里面的dataType;

    $.post("http://localhost/json.php",{data:"aaa"},function(data){
                console.log(data);
            },"json");

      4、$.getJSON 以Get的方式,请求JSON对象的数据

    $.getJSON("http://localhost/json.php",{data:"aaa"},function(data){
                console.log(data);
            });

      5、$.parseJSON(str) 将JSON字符串转为JSON对象

        标准的JSON字符串,键必须用双引号包裹。

    var str = '{"age":12}'
    var obj = $.parseJSON(str);
    console.log(obj);

    6、.trim() 去除掉字符串两端空格

    var str1 = "   123    ";
    console.log(str1.trim());

     

    7、用户遍历数组和对象

    遍历数组时,函数的第一个参数是下标,第二个参数是值;

    遍历对象时,函数的第一个参数是键,第二个参数是值

    复制代码
    var arr = [1,2,3,4,5,6,7];
    var obj = {
        name : "zhangsan",
        age : 12,
        sex : "nan"
    }
    $.each(obj,function(index,item){
        console.log(index);
        console.log(item);
    });
    复制代码

     


    二、ajax事件


     

      AJax的各种监听事件:

      ajaxStart ——→ ajaxSend ——→ ajaxSuccess/ajaxError/ajaxComplete ——→ ajaxStop

    复制代码
    $(document).ajaxSend(function(){
        alert("ajax请求发送");
    });
    $(document).ajaxStop(function(){
        alert("ajax请求停止");
    })
    $(document).ajaxStart(function(){
        alert("ajax请求开始");
    })
    $(document).ajaxSuccess(function(){
        alert("ajax请求成功");
    })
    $(document).ajaxError(function(){
        alert("ajax请求失败");
    })
    $(document).ajaxComplete(function(){
        alert("ajax请求完成(不管成功失败,都会死乞白赖出来)");
    })
    复制代码
  • 相关阅读:
    pm2部署node应用
    koa源码分析
    将vim配置成一个轻量的IDE开发工具
    私有npm下载资源
    nodejs的会话总结
    redis---安全设置
    Lua----注意事项
    Leetcode538.-Convert BST to Greater Tree-Easy
    Leetcode 230-Kth Smallest Element in a BST-Medium
    Leetcode669-Trim a Binary Search Tree-Easy
  • 原文地址:https://www.cnblogs.com/SZLLQ2000/p/7531761.html
Copyright © 2020-2023  润新知