JQuery学习之$.get、$.post、$.ajax的应用

引入库

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

css

body{
    display: grid;
    gap: 2em;
    padding: 2em;
}

html

<button class="get">GET</button>
<button class="post">POST</button>
<button class="jsonp">JSONP</button>

1. $.get(请求地址，参数，成功回调)

$(".get").click(function(ev){
    $.get("users.php",{id:1},function(data){
        $(ev.target).after("<span></span>").next().html(data);
    })
})

2. $.post

$(".post").click(function(ev){
    $.post("users.php",{id:2},function(data){
        $(ev.target).after("<div></div>").next().html(data);
    })
})

3. $.ajax:jsonp:跨域请求数据

$(".jsonp").click(function(ev){
    $.ajax({
        type:"get",
        url:"http://word.cn/test.php?id=3&jsonp=?",
        dataType:"jsonp",
        //告诉跨域服务器需要返回的函数名称
        jsonpCallback:"show"
    })
})
function show(data){
    $(".jsonp").after("<div></div>").next().html(data.name);
}