码迷,mamicode.com
首页 > Web开发 > 详细

初学Ajax(二)

时间:2016-04-25 21:12:00      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:

   $.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()基本上一致,他们之间的区别也比较隐晦,基本都是背后的不同,在用户使用上体现不出。具体区别如下:

  1. GET请求是通过URL提交的,而POST请求则是HTTP消息实体提交的
  2. GET提交有大小限制(2KB),而POST方式不受限制 
  3. GET方式会被缓存下来,可能有安全性问题,而POST没有这个问题
  4. 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"); 
});

 

初学Ajax(二)

标签:

原文地址:http://www.cnblogs.com/yerenyuan/p/5432556.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!