ajax的3種請求方式
阿新 • • 發佈:2019-01-11
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'=>'使用者名稱不能為空')));
}
?>