jeasyui制作计划-ajax学习

Ajax:可以无刷新状态更新页面,并且实现异步提交,提升了用户的体验。

1.load()函数的使用,可以三个参数:url(必须的参数,请求html文件的url地址,参数类型string)、date(可选,发送的key/value数据,参数类型Object)、callback(可选,成功或失败的回调函数,参数类型为函数Function)。

1)只有一个参数

//HTML

<input type="button" value="异步获取数据“ />

<div id="box"></div>

 //jQuery

$('input').click(function(){

    $('#box').load('test.html');    //函数中只有一个参数url。

});

2)传递两个参数url和data。

//jQuery

$('input').click(function(){

    $('#box').load('test.php',{

            url:'parameter'

        });    //函数中只有两个参数url和传进的data参数parameter。

});        

3)传递三个参数url和data和回调函数。

$('input').click(function () {
    $('#box').load('test.php', {
        url : 'parameter'
            }, function (response, status, xhr) {
            alert('返回的值为:' + response + ',状态为:' + status + ',状态是:' + xhr.statusText);
        });
});         

2、$.get和$.post方法
.load()方法是局部方法,必须包含一个元素作为jQuery对象作为前缀。而$.get()和$.post是全局方法,
不需要指定某个元素。就应用而言,.load()适合做静态文本的异步获取,而对于需要传递参数到服务其
页面的,$.get()和$.post()更加合适。
1)$.get()方法有四个参数,前三个参数和.load()一样,第四个参数为type,即服务器返回的内容格式:
包括xml、heml、script、json、jsonp和text。第一个参数为必选参数,后面三个为可选参数。

    //使用$.get()异步返回html类型
    $('input').click(function){
        $.get('test.php',{
            url:'parameter'
            },function(response,status,xhr){
            if(status =='success'){
                $('#box').html(response);
                }
            })
        });

说明:第四个参数type是指异步返回的类型。一般情况下type是智能判断的,不需要我们主动设置。
2)$.post()方法的使用和$.get()基本是一致的
使用时的主要区别:get方式通过$_GET[]获取,post方式通过$_POST[]获取。

//使用$.post()异步返回html
        $.post('test.php',{
            url:'parameter'
        },function(response,status,xhr){
                $('#box').html(response);
        });

3.$.getScript()和$.getJSON()

//点击按钮加载js文件        
$('input').click(function(){ $.getScript('test.js'); }); //$.getJson()方法是专门加载JSON文件的,使用方法和之前的类似。 $('input').click(function(){ $.getJSON('test.json',function(response,status,xhr){ alert(response[0].url); }); });

4.$.ajax() 是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数,传递一个各个功能键值对的对象。

  

    //$.ajax使用
    $('input').click(function(){
        $.ajax({
            type:'POST',
            url:'test.php',
            data:{
                url:'parameter'
                },
            success:function(response,stutas,xhr){
            $('#box').html(response);
            }
        });
    });

 Ajax 调用wcf服务的方法

链接:http://pan.baidu.com/s/1nuENB9f 密码:f6d0

原文地址:https://www.cnblogs.com/lwngreat/p/4388794.html