jquery ajax

最新推荐文章于 2024-03-02 11:21:12 发布

xst3300

最新推荐文章于 2024-03-02 11:21:12 发布

阅读量2.1k

点赞数 1

分类专栏：备忘文章标签： jquery ajax

本文链接：https://blog.csdn.net/u011308433/article/details/50059591

版权

备忘专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jquery ajax

个人用例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <script src="../jquery-2.1.4.min.js"></script>
    <style>
        .bigp{
            font-size: 120%;
            color: red;
        }
        .bgc{
            background: #333333;
        }
        .otherp{
            font-size: 150%;
            color: green;
        }
    </style>
</head>
<body>
<div style="text-align: center;">
    <h1>test------------------------------test</h1>
    <p id="first" class="bgc">first</p>
    <p id="second" class="otherp">second</p>
    <p id="third">third</p>
    text:<input id="rico" type="text">num:<input id="rand" type="text">
    <input type="button" onclick="callAjax()" value="test"><br>
    <img src="../wucheng.png" id="myimg" width="300" height="300">
</div>
<script>
    function callAjax(){
        $.ajax({
            url:'ajaxtest.php',
            cache:false,
            beforeSend: function () {
                alert('start');
            },
            type:'post',
            timeout:1000,
            data:{name:$('#rico').val(),isAjax:Math.random()*10},
            success: function (o) {
                if(o.res == 'success'){
                    alert('success');
                    $('#rico').val(o.msg);
                    $('#rand').val(o.num);
                    $('p#first').addClass('bigp');
                    $('p#second').toggleClass('otherp');
                    $('img#myimg').attr('title','wucheng');
                    $('p#third').html("hello <b>rico</b>");
                    $('h1').empty();
                    if($('p#first').hasClass('bigp')){
                        $('p#first').removeClass('bgc');
                    }
                    if(o.num >5){
                        $('img#myimg').removeAttr('title');
                    }
                }
            },
            error: function () {
                alert('call failed');
            },
            complete: function () {
                alert('end');
            },
            dataType:'json'
        });
    }
</script>
</body>
</html>

ajaxtest.php如下

if($_POST['name'] == 'rico'){
    echo json_encode(array('res'=>'success','msg'=>'hello world','num'=>(int)$_POST['isAjax']));
}else{
    echo json_encode(array('res'=>'success','msg'=>'you are not rico','num'=>(int)$_POST['isAjax']));
}

备忘

xst3300

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery ajax

jquery ajax个人用例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax</title> <script src="../jquery-2.1.4.min.js"></script> <style> .bigp{ font-
复制链接

扫一扫