jquery ajax

来源：互联网发布：c语言生成时间戳编辑：程序博客网时间：2024/06/07 21:11

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']));}

备忘

0 0