jquery中的4种ajax

最新推荐文章于 2023-11-25 15:20:31 发布

一勺菠萝丶

最新推荐文章于 2023-11-25 15:20:31 发布

阅读量385

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_39973810/article/details/82185392

前端专栏收录该内容

15 篇文章

订阅专栏

四种:
1,了解:jquery对象.load(url,params,function(数据){});(不常用,get方式)

  <!-- load方式 -->
    <script type="text/javascript">
        $(function () { //派发事件(页面加载成功以后要做的事情)
            $("#btn").click(function () {
                var url = "/day15/jqueryAjax";
                var params = {"username":"张四"};
                $(this).load(url, params, function (d) {
                    alert(d)
                })
            })
        })
    </script>

2,★: $.get(url,params,function(数据){},type);
发送get请求的ajax
url:请求的路径
params:请求的参数参数为key\value的形式 key=value {“”:”“,”“:”“}
fn:回调函数参数就是服务器发送回来的数据
type:返回内容格式，xml, html, script, json, text, _default。以后用”json”

<!-- get方式 -->
        <script type="text/javascript">
            $(function () { //派发事件
                $("#btn").click(function () {
                    var url = "/day15/jqueryAjax";
                    var params = {"username":"张四"};
                    $.get(url, params, function (d) {
                        alert(d)
                    })
                })
            })
        </script>

3,★: $.post(url,params,function(数据){},type);
发送post请求的ajax
若结果为json格式, 打印返回值的时候是一个对象
例如若json为 {“result”:”success”,”msg”:”成功”}
获取msg 只需要参数.msg

  <!-- post方式 -->
        <script type="text/javascript">
            $(function () { //派发事件
                $("#btn").click(function () {
                    var url = "/day15/jqueryAjax";
                    var params = {"username":"张四"};
                    $.post(url, params, function (d) {
                        alert(d.msg)
                    },"json")
                })
            })
        </script>

4,理解:
$.ajax([选项]);
选项的可选值:
url:请求路径
type:请求方法
data:发送到服务器的数据
success:fn 成功以后的回调
error:fn 异常之后的回调
dataType:返回内容格式经常使用json
async:设置是否是异步请求

 <!-- ajax方式 -->
        <script type="text/javascript">
            $(function () { //派发事件
                $("#btn").click(function () {
                    var url = "/day15/jqueryAjax";
                    var params = {"username":"张四"};
                    $.ajax({
                        url:url,
                        type:"post",
                        data:params,
                        success:function (d) {
                            alert(d.msg)
                        },
                        error:function () {},
                        dataType:"json"

                    })
                })
            })
        </script>

以上共用一个id

    <input type="button" id="btn" value="点我">