JQuery 操作 AJAX
Table of Contents
$.ajax $(DOM).load 包含 get 和 post 方式, 请求的数据会放在 DOM 里面 $.post $.get
.ajax
// json $.ajax({ type: "POST", url: "server.php", data: { name: xxx, number: xxx }, dataType: "json", success: function(data){ alert(data.msg); }, error: function(jqXHR){ alert("发生错误：" + jqXHR.status); }, }); // xml $.ajax({ type: ‘GET‘, url: ‘http://localhost/test.php‘, dataType: ‘xml‘, success: function (data) { alert(data.getElementsByTagName(‘url‘)[0].childNodes[0].nodeValue); }, error: function (xhr) { alert(xhr.statusText); } });
.load – get
<input type="button" value="load data"> <div id="box"></div> $(‘input‘).click(function () { $(‘#box‘).load(‘test.html‘); }); // test.html 的内容是 // <span>test</span> // <class>test</class> $(‘input‘).click(function () { $(‘#box‘).load(‘test.html .my‘); // 选择 class 为 my 的数据 });
load 请求的如果是 .html 静态文件, 那么直接返回静态文件里面的内容, 并且可以对其做
筛选, 如果 load 的 url 是 php 动态文件, 那么会返回动态文件生成的内容, 例如 echo
test.php
if ($_GET[‘url‘] == ‘test‘) { echo ‘you come here‘; }
$(‘input‘).click(function () { $(‘#box‘).load(‘test.php?url=test‘); // div box 里面的内容会变成 you come here });
.load – post
test2.php
if ($_POST[‘url‘] == ‘test‘) { echo ‘you come here‘; }
$("input").click(function() { var data = { url: ‘test‘ }; $("#box").load("test.php", data); });
.load – 回调函数
$(‘input‘).click(function () { var data = { url : ‘test‘ }; $(‘#box‘).load(‘test.php‘, data, function (response, status, xhr) { alert(‘返回的值为:‘ + response + ‘, 状态为:‘ + status + ‘, 状态是:‘ + xhr.statusText); // status: success }); });
.load 解析 json
test.php
<?php echo ‘{ "url": "www.example.com" }‘;
$(‘input‘).click(function () { $(‘#box‘).load(‘test.php‘, null, function (res, status, xhr) { var data = JSON.parse(res); alert(data.url); }); });
.load 解析 xml
test.php
<?php header(‘content-type: text/xml‘); echo ‘<root><url>www.example.com</url></root>‘;
test.js
$(‘input‘).click(function () { $(‘#box‘).load(‘test.php‘, null, function (res, status, xhr) { var xml = res; alert($(xml).find(‘url‘).html()); }); });
.get 解析 json
<?php
echo ‘{"root": {"url": "www.example.com"}}‘;
$.get("test.php", { url: ‘test‘ }, function(response, status, xhr){ var res = JSON.parse(response); alert(res.root.url); });
.post 和 xml
test.php
<?php header(‘content-type: text/xml‘); echo ‘<root><url>www.example.com</url></root>‘;
$("input").click(function(){ $.post("test.php", function(response, status, xhr){ alert($(response).find(‘root‘).find(‘url‘).text()); alert($(response).find(‘url‘).text()); }); });
.post 和 json
test.php
<?php echo ‘{ "url": "www.example.com" }‘;
$("input").click(function(){ $.post("test.php", function(response, status, xhr){ alert(response.url); }); });
test.php
echo ‘[{ "url": "www.example1.com" }, { "url": "www.example2.com" }]‘;
$("input").click(function(){ $.post("test.php", function(response, status, xhr){ var res = JSON.parse(response); alert(res[1].url); }); });
