jQuery留言板dom操作-ajax的get|post|jsonp跨域

用常用的jQuery中的DOM操作，實(shí)現(xiàn)前面寫(xiě)的的留言本案例(todolist)
實(shí)例演示$.get,$.post,并用$.ajax再實(shí)現(xiàn)一遍，并用$.ajax實(shí)現(xiàn)jsonp中跨域請(qǐng)求

body 中引入 jQuery 庫(kù)

<!-- 引入 jQuery 庫(kù) -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1. 用常用的jQuery中的DOM操作，實(shí)現(xiàn)前面寫(xiě)的的留言本案例(todolist)

<!-- jQuery中的DOM操作，實(shí)現(xiàn)前面寫(xiě)的的留言本 -->
<label><input type="text" id="msg" /></label>
<ol class="list"></ol>
<script>
    // 留言板追加數(shù)據(jù)
    $('#msg').on('keydown', function (ev) {
        // 非空回車(chē)時(shí)
        if ($(this).val().length > 0) {
            if (ev.key == 'Enter') {
                let msg = `<li>${$(this).val()} [<a href="javascript:;" onclick="$(this).parent().remove();">刪除</a>]</li>`;
                // 新添加的留言在前
                $('ol.list').prepend(msg);
                // 清空上一條留言
                $(this).val(null);
            }
        }
    });
</script>

添加3條留言

留言本

刪除中間留言

刪除留言

2. 實(shí)例演示$.get,$.post,并用$.ajax再實(shí)現(xiàn)一遍，并用$.ajax實(shí)現(xiàn)jsonp中跨域請(qǐng)求

2.1 實(shí)例演示$.get,$.post,并用$.ajax再實(shí)現(xiàn)一遍

body 中添加html和js

<!-- 實(shí)例演示$.get,$.post,并用$.ajax再實(shí)現(xiàn)一遍 -->
<select name="select" id="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<hr />
<!-- $.get() 請(qǐng)求方法 -->
<button class="get">$.get()</button>
<!-- $.post() 請(qǐng)求方法 -->
<button class="post">$.post()</button>
<!-- $.ajax() - get 請(qǐng)求 -->
<button class="ajax-get">$.ajax() - get</button>
<!-- $.ajax() - post 請(qǐng)求 -->
<button class="ajax-post">$.ajax() - post</button>
<script>
    $("button").click(function (ev) {
        const select = $('#select').val();
        const url = 'ajax/users.php';
        switch ($(this).attr("class")) {
            // $.get() 請(qǐng)求方法
            case 'get':
                $.get(url, { id: select }, function (data) {
                    // 防止重復(fù)添加
                    if (!$(ev.target).next('p').length)
                        $(ev.target).after("<p></p>").next("p").html(data);
                });
                break;
            // $.post() 請(qǐng)求方法
            case 'post':
                $.post(url, { id: select }, function (data) {
                    if (!$(ev.target).next('p').length)
                        $(ev.target).after("<p></p>").next("p").html(data);
                });
                break;
            // $.ajax() - get 請(qǐng)求
            case 'ajax-get':
                $.ajax({
                    type: 'get',
                    url: url,
                    data: { id: select },
                    // dataType: 'html',
                    success: function (data) {
                        if (!$(ev.target).next('p').length)
                            $(ev.target).after("<p></p>").next("p").html(data);
                    }
                });
                break;
            // $.ajax() - post 請(qǐng)求
            case 'ajax-post':
                $.ajax({
                    type: 'post',
                    url: url,
                    data: { id: select },
                    // dataType: 'html',
                    success: function (data) {
                        if (!$(ev.target).next('p').length)
                            $(ev.target).after("<p></p>").next("p").html(data);
                    }
                });
        }
    });
</script>

請(qǐng)求的 ajax/users.php 是默認(rèn)的

<?php 
// 二維數(shù)組來(lái)模擬數(shù)據(jù)表的查詢結(jié)果
$users = [
    ['id' => 1, 'name' => '天蓬大人', 'age' => 66],
    ['id' => 2, 'name' => '滅絕師妹', 'age' => 55],
    ['id' => 3, 'name' => '西門(mén)老妖', 'age' => 44],
];
// $_REQUEST: 相當(dāng)于 $_GET + $_POST + $_COOKIE 三合一
if (in_array($_REQUEST['id'], array_column($users, 'id'))) {
    foreach ($users as $user) {
        if ($user['id'] == $_REQUEST['id']) {
            // vprintf(輸出模板, 數(shù)組表示的參數(shù))
            vprintf('%s: %s %s歲',$user);
            // 以下語(yǔ)句配合$.getJSON()調(diào)用,其它請(qǐng)求時(shí)請(qǐng)注釋掉
        //  echo    json_encode($user);
        }
    }
} else {
    die('<span style="color:red">沒(méi)找到</span>');
}

下拉選項(xiàng)依次選 1~4，依次點(diǎn)擊四個(gè)按鈕，由于 users 沒(méi) id=4 的，最后一個(gè)按鈕請(qǐng)求的結(jié)果是未找到

ajax請(qǐng)求

2.2 用$.ajax實(shí)現(xiàn)jsonp中跨域請(qǐng)求

body 中追加html和js

<!-- 用$.ajax實(shí)現(xiàn)jsonp中跨域請(qǐng)求 -->
<p>
    <label for="jsonp">jsonp跨域</label>
    <select name="jsonp" id="jsonp">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</p>
<script>
    // jsonp 跨域請(qǐng)求動(dòng)態(tài) id , 回調(diào)函數(shù)名為 show 告訴服務(wù)器端
    $("#jsonp").change(function () {
        let id = $(this).val();
        $.ajax({
            type: 'get',
            url: 'http://wordpress/world/test.php?id=' + id + '&jsonp=show',
            dataType: 'jsonp',
            jsonpCallback: "show",
        });
    });
    // 處理響應(yīng)結(jié)果的回調(diào)函數(shù)
    function show(res) {
        // 將內(nèi)容追加到頁(yè)面中
        $("#jsonp").after("<p></p>").next().html(`${res.name} (${res.email})`);
    }
</script>

jsonp跨域的 http://wordpress/world/test.php 是默認(rèn)的

<?php
header('content-type:text/html;charset=utf-8');
// 獲取回調(diào)名稱
$callback = $_GET['jsonp'];
$id = $_GET['id'];
// 模擬接口數(shù)據(jù)
$users = [
    0=>'{"name":"朱老師", "email":"peter@php.cn"}',
    1=>'{"name":"西門(mén)老師", "email":"xm@php.cn"}',
    2=>'{"name":"豬哥", "email":"pig@php.cn"}' 
];
if (array_key_exists(($id-1), $users)) {
    $user = $users[$id-1];
}
// echo $user;
// 動(dòng)態(tài)生成handle()的調(diào)用
echo $callback . '(' . $user . ')';