您的位置：首页 > Web前端 > JQuery

Ajax技术[6]-jQuery提供的Ajax快捷方法(2)

2015-11-28 08:24 751 查看

ajax01.html

客户端

<!DOCTYPE html>
<!--客户端-->
<!--课时46初探浏览器原生Ajax接口(1)-->
<!--使用get方式拿到服务器数据-->
<html id="html">
<head>
<meta charset="utf-8" />
<title>demo</title>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">

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

//从服务器载入数据并且将返回的 HTML 代码替换 匹配的元素 的后代元素
//.ul0服务器返回，内容的某个class，不指定class则表示返回的所有内容
//                 $('#div1').load('get.php .ul0',function(responseText,textStatus,jqXHR){
//
//                 });

//使用一个HTTP GET请求从服务器加载并拿到当前页来执行一个 JavaScript 代码
//                 $.getScript('get.php',function(script,textStatus,jqXHR){
//                 console.log(jqXHR);
//                 });

//                 $.getJSON('get.php',{id:1},function(data,textStatus,jqXHR){
//                 console.log(data);
//                 });

//跨源请求，只需要在 请求的url地址后面接上一个查询字符串callback=?
//                 $.getJSON('http://127.0.0.1/MyTestAjax07/get.php?callback=?',{id:1},function(data){
//                 console.log(data);
//                 });

//                 var jqXHR=$.get('get.php');
//                 jqXHR.done(function(data,textStatus,jqXHR){
//                 //请求成功之后执行的回调函数
//                 alert('请求成功了！');
//                 console.log(data);
//                 });
//                 jqXHR.fail(function(jqXHR,textStatus,errorThrown){
//                 //请求失败之后执行的回调函数
//                 alert('请求失败了！');
//                 console.log(errorThrown);
//                 });
//                 jqXHR.always(function(a,b,c){
//                 //该回调函数的参数如果 请求是成功的则同done方法的参数,如果请求是失败的则同fail方法的参数
//                 //请求完成之后执行的回调函数
//                 alert('请求完成了！');
//                 console.log(a);
//                 });

//                把上面的代码连起来写

$.get('get.php',function(){
console.log(':))');
}).done(function(data){
console.log(data);
}).fail(function(){
console.log(':((');
}).always(function(){
console.log('always');
});

});

});
</script>
</head>
<body>
<button>开始</button>
<div id="div1">
div1
</div>
</body>
</html>

get.php

服务器端

<?php
//sleep(3);

//$html=<<<A
//<ul class="ul0">
//    <li>哈哈！</li>
//    <li>哈哈！</li>
//    <li>哈哈！</li>
//    <li>哈哈！</li>
//    <li>哈哈！</li>
//</ul>
//<ul class="ul1">
//    <li>哈哈！</li>
//    <li>哈哈！</li>
//    <li>哈哈！</li>
//    <li>哈哈！</li>
//    <li>哈哈！</li>
//</ul>
//A;
//echo $html;

//$script=<<<A
//alert(':))');
//A;
//echo $script;

$json=<<<A
[{"title":"标题","url":"http://sifangku.com"},{"title":"标题2","url":"http://baidu.com"}]
A;
//返回json数据
echo $json;
//返回JSONP数据
//echo "{$_GET['callback']}({$json})";

?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航