初学Ajax(二)

$.get()和$.post()

.load()方法是局部方法，因为它需要一个包含元素的jQuery对象作为前缀。而$.get()和$.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。

$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数type，即服务器返回的内容格式：包括xml、html、script、json、jsonp和text。第一个参数为必选参数，后面三个为可选参数。

html代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>
    <input type="button" value="异步加载数据" />
    <div id="box">

    </div>
</body>
</html>

get方式接受的PHP：

<?php
    if($_GET[‘url‘] == ‘ycku‘) {
        echo "瓢城Web俱乐部";
    } else {
        echo "木有！";
    }
?>

jQuery代码如下：

①通过直接在url问号后紧跟着传参

$("input").click(function() {
    $.get("test.php?url=ycku", function(response, status, xhr) {
        $("#box").html(response);
    });
});

②通过第二个参数data，字符串形式的键值对传参，然后自动转换为问号后紧跟着传参

$("input").click(function() {
    $.get("test.php","url=ycku", function(response, status, xhr) {
        $("#box").html(response);
    });
});

③通过第二个参数data，对象形式的键值对传参，然后自动转换为问号后紧跟着传参

$("input").click(function() {
    $.get("test.php",{url:"ycku"}, function(response, status, xhr) {
        $("#box").html(response);
    });
});

post方式接受的PHP：

<?php

    if($_POST[‘url‘] == ‘ycku‘) {
        echo "瓢城Web俱乐部";
    } else {
        echo "木有！";
    }

?>

jQuery代码：

①post提交不能使用问号传参

$("input").click(function() {
    $.post("test.php?url=ycku", function(response, status, xhr) {
        $("#box").html(response);
    });
});

②post提交可以使用字符串形式的键值对传参，自动转换为http消息实体传参

$("input").click(function() {
    $.post("test.php","url=ycku", function(response, status, xhr) {
        $("#box").html(response);
    });
});

③post提交可以使用对象键值对

$("input").click(function() {
    $.post("test.php",{url:"ycku"}, function(response, status, xhr) {
        $("#box").html(response);
    });
});

使用$.post()异步返回html类型：

$("input").click(function() {
    $.post("test.php",{url:"ycku"}, function(response, status, xhr) {
        $("#box").html(response);
    }, "html"); //php文件返回的是纯文本，默认是html或text
});

注意：第四参数type是指定异步返回的类型。一般情况下type参数是智能判断，并不需要我们主动设置，如果主动设置，则会强行按照指定类型格式返回。

$("input").click(function() {
    $.post("test.php",{url:"ycku"}, function(response, status, xhr) {
        $("#box").html(response);
    },"xml"); //本身是纯文本，如果强行按照xml或者json数据格式返回的话，那么就无法获取数据了
});

服务器有test.xml文件：

<?xml version="1.0"?>
<root>
    <url>www.ycku.com</url>
</root>

jQuery代码：

$("input").click(function() {
    $.post("test.xml", function(response, status, xhr) {
        //$("#box").html(response); //报错
        alert(response); //[object XMLDocument]
    },"xml");
});

$("input").click(function() {
    $.post("test.xml", function(response, status, xhr) {
        //$("#box").html(response);
        alert(response);
    },"html");  //默认type已经是xml，如果默认已经是xml，强行设置为html，则会连xml标签也返回
});

使用$.post()异步返回xml：

$("input").click(function() {
    $.post("test.xml", function(response, status, xhr) {
        //alert($(response).find("root").find("url").text());
        $("#box").html($(response).find("root").find("url").text());
    }); //type自动转为xml
});

注意：如果载入的是xml文件，type会智能判断，如果强行设置html类型返回，则会把xml文件当成普通数据全部返回，而不会按照xml格式解析数据。

服务器有test.json文件：

[
    {
        "url" : "www.ycku.com"
    }
]

使用$.post()异步返回json：

$("input").click(function() {
    $.post("test.json", function(response, status, xhr) {
        alert(response[0].url);
    }, "json");
});

$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的不同，在用户使用上体现不出。具体区别如下：

GET请求是通过URL提交的，而POST请求则是HTTP消息实体提交的
GET提交有大小限制（2KB），而POST方式不受限制
GET方式会被缓存下来，可能有安全性问题，而POST没有这个问题
GET方式通过$_GET[]获取，POST方式通过$_POST[]获取(仅针对php而言)

$.getScript()和$.getJSON()

jQuery提供了一组用于特定异步加载的方法：$.getScript()，用于加载特定的JS文件；$.getJSON()，用于专门加载JSON文件。

有时我们希望能够在特定的情况再加载JS文件，而不是一开始把所有JS文件都加载了，这时就要使用$.getScript()方法。

Ajax.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <!-- <script type="text/javascript" src="test.js"></script> -->
</head>
<body>
    <input type="button" value="异步加载数据" />
    <div id="box">

    </div>
</body>
</html>

test.js：

alert("我在被呼唤的情况下才被加载");

jQuery代码：

点击按钮后再加载JS文件：

$("input").click(function() {
    $.getScript("test.js");
});

$.getJSON()方法是专门用于加载JSON文件的，使用方法和之前的类似。

test.json：

[
    {
        "url" : "www.ycku.com"
    }
]

jQuery代码：

$("input").click(function() {
    $.getJSON("test.json", function(response, status, xhr) {
        alert(response[0].url);
    });
});

$("input").click(function() {
    $.getJSON("test.json", function(response, status, xhr) {
        alert(response); //[object Object]
    },"html");
});

时间： 2024-10-17 19:48:41

初学Ajax(二)

初学Ajax(二)的相关文章

TensorFlow官方文档MNIST初学笔记[二]

初学Ajax

AJAX(二）详解GET/POST请求

谈谈Ajax(二)

对jquery中的$.ajax二次封装从而多次调用今天一整天都在想这个事情

初学Ajax(一)

Jquery Ajax二次封装（部分转载）

ajax(二)

Linux初学（二）