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