版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_41179401/article/details/84941815
ajax的3种请求方式 get() post() ajax()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax的3种请求方式</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<input id="user" type="text" name="username">
<button id="btn1">get</button>
<button id="btn2">post</button>
<button id="btn3">ajax</button>
<script type="text/javascript">
// get
$('#btn1').click(function(){
$.get('test.php',{'user':$('#user').val()},function(text){
console.log(text);
})
})
// post
$('#btn2').click(function(){
$.post('test.php',{'user':$('#user').val()},function(text){
console.log(text);
})
})
// ajax
$('#btn3').click(function(){
$.ajax({
type:'POST',
url:'test.php',
data:{
'user':$('#user').val()
},
success:function(text){
console.log(text);
}
})
})
</script>
</body>
</html>
test.php::
<?php
$user = $_REQUEST['user'];
echo $user;
?>
可以指定服务端返回的数据类型:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax的3种请求方式</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<input id="user" type="text" name="username">
<button id="btn1">get</button>
<button id="btn2">post</button>
<button id="btn3">ajax</button>
<script type="text/javascript">
// get
$('#btn1').click(function(){
$.get('test.php',{'user':$('#user').val()},function(text){
if(text.code==-1) console.log(text.msg);
},'json') //指定返回类型 数据返回时会自动把json转化为一个对象
})
// post
$('#btn2').click(function(){
$.post('test.php',{'user':$('#user').val()},function(text){
if(text.code==-1) console.log(text.msg);
},'json') //指定返回类型
})
// ajax
$('#btn3').click(function(){
$.ajax({
type:'POST',
url:'test.php',
data:{
'user':$('#user').val()
},
success:function(text){
if(text.code==-1) console.log(text.msg);
},
dataType:'json' //指定返回类型
})
})
</script>
</body>
</html>
test.php:
<?php
$user = $_REQUEST['user'];
if(empty($user)){
//json_encode将数组转化为json字符串
echo (json_encode(array('code'=>-1,'msg'=>'用户名不能为空')));
}
?>