21-ajax使用方法

$.ajax使用方法
常用参数：
1、url 请求地址
2、type 请求方式，默认是'GET',常用的还有'POST'
3、dataType 设置返回的数据格式，常用的是json,也可以设置为html
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是'true',表示异步

以前的写法：

 

$.ajax({
    url:'js/data.json',
    type:'GET',
    dataType:'json',
    data:{'aa':1}
    success:function(data){
    alert(data.name);
    },
    error:function(){
    alert('服务器超时，请重试!');
    }
});

 

 

新的写法（推荐）:

 

$.ajax({
    url:'js/data.json',
    type:'GET',
    dataType:'json',
    data:{'aa':1}
}}
.done(function(data){
    alert(data.name);
})
.fail(function(){
    alert('服务器超时，请重试!');
});

//data.json里面的数据：{"name":"tom","age":18}

 

//data.json里面的数据：{"name":"tom","age":18}

 

 

data.json：

 

{
    "name":"tom",
    "age":18,
    "info":["male","student"]
}

 

读取data.json：

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){

            $.ajax({
            url:'js/data.json',  //这个是一个本地地址，开发时会从远程接口读取数据
            type:'get',
            dataType:'json'
            })

            .done(function(dat){
                $("#name").html(dat.name);
                $('#age').html(dat.age)
                console.log(dat)
            })

            .fail(function(){
                alert('服务器超时，请重试!');
            })
        })

    </script>
</head>
<body>
    <h1>server test</h1>
    <p>姓名：<span id="name"></span></p>
    <p>年龄：<span id="age"></span></p>
</body>
</html>

 

posted @ 2019-04-08 00:01  greenfan  阅读(104)  评论(0)    收藏  举报