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

jQuery-AJAX

2016-05-12 15:19 549 查看

通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中。

（1） load()方法

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

（2） ajax()方法

ajax() 方法通过 HTTP 请求加载远程数据。

（3） get()方法

get()方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

（4）POST()方法

post() 方法通过 HTTP POST 请求从服务器上请求数据。

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

具体代码如下：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
#divframe{border: 1px solid #999999;width: 500px;margin: 0 auto;}
.loadTitle{background: #cccccc;height: 30px;}
</style>
<script>
$(function(){
//1.使用load方法
//            $("#btn").click(function(){
//                //加载整个页面
//                //$("#ajaxTip").load("aa.html");
//                //加载页面中的某一个元素
//                $("#ajaxTip").load("aa.html #userinfo");
//            });
//2.使用AJAX
//            $("#btn").click(function(){
//                htmlobj = $.ajax({url:"aa.html #userinfo",async:false});
//                $("#ajaxTip").html(htmlobj.responseText);
//            });
//3.get方法
//            $("#btn").click(function(){
//                htmlobj = $.get("hello.txt",function(){
//                    $("#ajaxTip").html(htmlobj.responseText);
//                });
//            });
//4.post方法
$("#btn").click(function(){
$.post("hello.txt",
function(data){
$("#ajaxTip").html("获取的数据为:<br/>"+data);
});
});
});
</script>

</head>
<body>
<div id="divframe">
<div class="loadTitle">
<input type="button" value="获取数据" id="btn"/>
</div>
<div id="ajaxTip">
</div>
</div>

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

标签：

相关文章推荐

新的分享

章节导航