jquery ajax

jquery ajax

个人用例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajaxtitle>
    <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------------------------------testh1>
    <p id="first" class="bgc">firstp>
    <p id="second" class="otherp">secondp>
    <p id="third">thirdp>
    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 rico");
                    $('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']));
}

备忘

你可能感兴趣的:(备忘,jquery,ajax)