JQuery 操作 AJAX

Table of Contents

• .ajax
• .load – get
• .load – post
• .load – 回调函数
• .load 解析 json
• .load 解析 xml
• .get 解析 json
• .post 和 xml
• .post 和 json
• 相关阅读

$.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);
    });
});

相关阅读

• 其他无刷新技术
• JS 操作 AJAX
• AJAX 介绍