课件_50.第九章：Ajax技术[5]-jQuery提供的Ajax快捷方法(1)

ajax01.html

客户端

<!DOCTYPE html>
<!--客户端-->
<!--课件_50.第九章：Ajax技术[5]-jQuery提供的Ajax快捷方法(1).rar-->
<!--使用get、post方式拿到服务器数据,两种方式很相似-->
<html id="html">
<head>
    <Meta charset="utf-8" />
    <title>demo</title>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script>
    $(function(){
    $('button').click(function(){

//    $.get('get.PHP',{id:1,name:"张三"},function(data,textStatus,jqXHR){
//    //当请求完成并且成功后执行的回调函数
//    console.log('执行成功啦！');
//    console.log(data);//服务器端返回的主体数据
//    console.log(textStatus);//返回状态成功是：success
//    console.log(jqXHR);//XHR对象的一个超集（子集）
//    });



    //服务器端设置了header('Content-Type:text/html');所以jQuery会将返回的数据看成是html字符串
//    $.get('html.PHP',function(data){
//    console.log(typeof data);
//    $('body').append(data);
//    });



    //服务器端设置了header('Content-Type:application/x-javascript');所以jQuery会将返回的数据看成是js代码直接自动的去执行！
//    $.get('script.PHP');




    //服务器端设置了header('Content-type:application/json');所以jQuery会将返回的数据作为JSON格式自动的转换为js对象
    //返回的数据一定要符合JSON规范
//    $.get('json.PHP',function(data){
//    console.log(data);
//    });


    //如果不在服务器端设置返回数据的类型，在客户端也可设置
    //设置了html，则jQuery会讲返回的数据当做是html字符串
//    $.get('get1.PHP',function(data){
//    console.log(data);
//    $('body').append(data);
//    },'html');



    //jQuery会直接将返回的数据当做是js代码来执行，而忽略响应的Content-Type信息
//    $.get('get1.PHP',function(data){
//
//    },'script');


    /*
    //注：如果要设置该值，我们最好传入上面的回调函数（用来占位防止参数被错误的认为是传入到服务器的数据），否则无效！
    $.get('test/get.PHP',function(){},'script');
    */


    //jQuery会讲返回的数据当做是JSON格式的数据，自动的转换为js对象
    //返回的数据一定要符合JSON规范
//    $.get('get1.PHP',function(data){
//        console.log(data);
//    },'json');



    //传入jsonp，使用jsonp实现跨源请求
//    $.get('http://127.0.0.1/MyTestAjax06/get1.PHP',function(data){
//    console.log(data);
//    },'jsonp');


    //jQuery自动的帮你做了，几乎一切麻烦的事情！
    $.post('post.PHP',{name:"孙胜利",sex:true},function(data){
       console.log(data);
    });

    });



    });
    </script>
</head>
<body>
<button>开始</button>
</body>
</html>

ajax01.PHP

服务器端

<?PHP
echo $_GET;

//$html=<<<A
//<ul>
//    <li>哈哈！</li>
//    <li>哈哈！</li>
//    <li>哈哈！</li>
//    <li>哈哈！</li>
//    <li>哈哈！</li>
//</ul>
//A;
//
//$script=<<<A
//if(1>100){
//    alert('大于100');
//}else{
//    alert('不大于100');
//}
//A;
//
//$json=<<<A
//{"name":"孙胜利","sex":true}
//A;
//
//
////返回调用回调函数的js代码
//echo "{$_GET['callback']}($json)";
//?>

get.PHP

服务器端

<?PHP
echo'访问到服务器了';
?>

html.PHP

服务器端

<?PHP
//响应给客户端的数据类型
header('Content-Type:text/html');
print_r($_GET);
?>

json.PHP

服务器端

<?PHP
header('Content-type:application/json');
$json=<<<A
{"name":"孙胜利","sex":true}
A;
echo $json;
?>

post.PHP

服务器端

<?PHP
print_r($_POST);
?>

script.PHP

服务器端

<?PHP
header('Content-Type:application/x-javascript');
//header('Content-Type:text/javascript');
$script=<<<A
if(1>100){
    alert('大于100');
}else{
    alert('不大于100');
}
A;
echo $script;
?>

课件_50.第九章：Ajax技术[5]-jQuery提供的Ajax快捷方法(1)

相关文章