jQuery中的$.post和$.get方法

Author: 劉老師(Aaron Lau) 武漢長樂教育,武漢PHP培訓課程,版權所有,轉載請注明!

jQuery中的$.post和$.get方法

本課程主要內容概要

  1. $.post方法的格式
  2. html數據格式示范
  3. json數據格式示范
  4. $.get方式
  5. $.getScript()方法(異步加載js)
  6. $.getJSON()方法(異步加載json數據)

1. $.post方法的格式

$.post方法是最常用的Ajax請求方式,請務必掌握!

格式如下

$.post( url, [, data] [, callback] [, type])
參數名稱 類型 說明
url String 請求HTML頁面的URL地址
data(可選) Object 發送至服務器的key/value數據
callback(可選) Function 回調函數,只有當請求成功才執行!
type(可選) String 服務器返回的數據格式,包括xml/html/json/text等

2. html數據格式示范

<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body>
        <div class="result"></div>

        <div>昵稱:<input type="text" name="name" class="name" /></div>
        <div>留言內容:<textarea name="content" class="content"></textarea></div>

        <button>點我</button>
        <script src="jquery-2.1.1.min.js"></script>
        <script>
            $(function(){
                var i = 0;
                $("button").click(function(){
                    var name = $(".name").val();
                    var content = $(".content").val();

                    //console.log(name);
                    $.post("index.php", {
                            name:name,
                            content:content
                        }, function(data){
                            $(".result").append(data);
                    },"html");
                });
            });
        </script>
    </body>
</html>
<?php
$name = $_POST["name"];
$content = $_POST["content"];

echo "用戶名是:".$name."<br />留言內容是:".$content."<hr />";

3. json數據格式示范

index.html

<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body>
        <div class="result"></div>

        <div>昵稱:<input type="text" name="name" class="name" /></div>
        <div>留言內容:<textarea name="content" class="content"></textarea></div>

        <button>點我</button>
        <script src="jquery-2.1.1.min.js"></script>
        <script>
            $(function(){
                $("button").click(function(){
                    var name = $(".name").val();
                    var content = $(".content").val();

                    //console.log(name);
                    $.post("index.php", {
                            name:name,
                            content:content
                        }, function(data){
                            var str = "昵稱是:";
                            str += data.name;
                            str += "<br />留言內容是:"
                            str += data.content;
                            str += "<hr />";

                            $(".result").append(str);
                    },"json");
                });
            });
        </script>
    </body>
</html>

index.php

<?php
$info["name"] = $_POST["name"];
$info["content"] = $_POST["content"];

//返回json格式數據
echo json_encode($info);

4. $.get方式

$.get方式與$.post方式一樣,只不過采用了get方式發送數據而已.

只需將js代碼中改為$.get,PHP代碼中改為$_GET即可.

5. $.getScript()方法(異步加載js)

如果頁面加載js過多,為了避免打開頁面時,就加載全部的js文件而導致頁面加載過慢,可以采用異步動態加載js的方式.

$(function(){
    $.getScript('jquery.color.js',function(){
        $("<p>加載JavaScript完畢</p>").appendTo("body");
        $("#go").click(function(){
            $(".block").animate( { backgroundColor: 'pink' }, 1000)
                        .animate( { backgroundColor: 'blue' }, 1000);
        });
    });
})

6. $.getJSON()方法(異步加載json數據)

跨域獲取json數據

實例1:

<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body>
        <div class="result"></div>
        <button>點我</button>

        <script src="jquery-2.1.1.min.js"></script>
        <script>
            $(function(){
                $("button").click(function(){
                    $.getJSON("http://127.0.0.1/index.php?callback=?",function(data){
                            console.log(data);
                    });
               });
            });
        </script>
    </body>
</html>
<?php
$arr["info"] = "it is a test";
echo $_GET['callback'].'('.json_encode($arr).')';

實例2:

<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body>
        <div class="result"></div>
        <button>點我</button>

        <script src="jquery-2.1.1.min.js"></script>
        <script>
            $(function(){
                $("button").click(function(){
                    $.getJSON("http://127.0.0.1/index.php", function(data){
                            var html = '';

                            $.each(data.song, function(key, value){
                                html += value.title+"<br />";
                                html += "<img src="+value.picture+" width=100 height=100 /><hr />";
                            })

                            $(".result").html(html);
                    });
               });
            });
        </script>
    </body>
</html>
<?php
$str=file_get_contents("http://douban.fm/j/mine/playlist?channel=1");
echo $str;

如果公共api不支持跨域請求,我覺得最好的辦法,可能是用file_get_contents()轉到本域.

上一篇課程 下一篇課程

學生登錄