jQuery的ajax几种请求方法

话不多说,详细代码来介绍这几种请求方式:

ajax与服务器进行数据交换。实现不重载页面的情况下,对部分网页进行局部更新。 通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

1.load方法:通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

1.$('selector').load(url,data,callback)

js代码:

$(function(){
        $('button').click(function(){
            $('#b').load('1.txt',function(responseTxt,statusTxt,xhr){
                if(statusTxt=='success'){
                    alert('外部加载成功');
                }
                if(statusTxt=='error'){
                    alert('Error:'+xhr.status+':'+xhr.statusText);
                }
            })
        })
    })

html代码:

<p id="b"></p>
<button>按钮</button>

2.get方法:从指定的资源请求数据 可能返回缓存数据

js代码:

$('button').click(function(){
    $.get('1.txt',function(data,status){
        alert('数据:'+data+'状态:'+status);
    })
    })

html代码:

<p id="b"></p>
<button>按钮</button>

3.post方法:向指定的资源提交数据 不会缓存数据连同请求一起发送数据

js代码:

$('button').click(function(){
        $.post('1.js',{
            name:"Donald Duck",
            city:"Duckburg"
        },function(data,status){
            alert("数据:" + data + "\n状态:" + status);
        })
    })

html代码如上,json代码如下

4.getjson方法:可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中

格式:jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])

js代码:

 $(function(){
        $('#btn').bind('click',function(){
            $.getJSON('1.js',function(data){
                $.each(data,function(i,item){
                    $('ul').append("<li>"+item.name+"</li>")
                })
            })

        })
    })

html代码:

<div>
    <span style="background-color: rgba(192, 96, 255, 0.5)">我最喜欢的东西</span>
    <span><input type="button" id="btn" value="加载"></span>
    <ul></ul>
</div>

json格式的文件1.js

[
    {"name":"1"},
    {"name":"2"},
    {"name":"2"},
    {"name":"4"}
]

5.getScript()方法通过http GET请求并执行JavaScript文件。

语法:$.getScript(url,success(response,status))

简写:$.ajax({

url:'url',

datatype:'script',

success:'success'

})

js代码:

   $('#btn').bind('click',function(){
            var $this=$(this);
            $.getScript('1.js',function(data){
                $this.attr("disabled",true);
                var b=eval(data);
               /*console.log(b[0].name)*/
                $('ul').append("<li style='list-style: none'>"+"姓名:"+b[0].name+"年龄:"+b[0].age+"</li>")
            })
        })

html代码:

 <span>个人信息:<input type="button" id="btn" value="加载"></span>
    <ul></ul>

1.js代码:

为什么在数据传输过程中需要转换?

网络中传输的都是文本字符串(也就是二进制比特流),因此在向网络通道中写入数据时,都需要将json对象——》文本字符串。而从网络通道中读取数据时,都需要反序列化文本字符串——》json对象

json格式的转换:

json字符串转换为json对象两种方式:parse和eval

var str='{"name":"JSON","address":"北京市西城区","age":25}';
   /* var b=JSON.parse(str);*/
    var b=eval("("+str+")");
    console.log(b);

json对象转换为json字符串:

 var obj={"name":"JSON","address":"北京市西城区","age":25};
    var c=JSON.stringify(obj)
    console.log(typeof c)

未完待续。。。。

发布了79 篇原创文章 · 获赞 36 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/yezi__6/article/details/88897795
今日推荐