方式一：
1 <script type="text/javascript"> 2 function test() { 3 $.ajax({ 4 url:"test1",//要發送的地址 5 data:{ 6 "str":"你好", 7 "str2":"世界" 8 },//發送的數據 9 type: "POST",//發送的類型 10 dataType:"html",//預期響應的數據類型 11 success: function (data) { 12 //服務器返回的內容 13 alert(data) 14 } 15 }) 16 } 17 </script> 18 </head> 19 <body> 20 <button id='btn' onclick="test()">點我</button> 21 </body>
方式二:
<script type="text/javascript"> function test() { $("#mydiv").load("test1",{"str":"Hello","str2":"World"}) } </script> </head> <body> <button onclick="test();">點我</button> <div id="mydiv">初始內容</div> </body>
說明:
load() 方法的作用是可以通過 AJAX 請求從服務器加載數據，並把返回的數據直接放置到指定的元素中。
語法 ： jQuery對象 . load(url, param ,callback);
url 訪問服務器地址
param 發送給服務器參數
callback 當正常返回后 執行回調函數
注意：如果 param存在，以POST方式請求， 如果param 不存在，以GET方式請求,參數可以拼接到請求頁面后
使用了回調函數的方法:
1 <script type="text/javascript"> 2 function test() { 3 //發送ajax請求，並將返回的響應結果直接賦給div 4 $("#mydiv").load("servlet/test1",{"str":"你很好","str2":"你很壞"},function(data){ 5 //回調函數里面的內容 6 alert(data); 7 }); 8 } 9 </script> 10 </head> 11 <body> 12 <button onclick="test();">點我</button> 13 <div id="mydiv">初始內容</div>
注意：回調函數在load填充完數據了之后執行
方式三：$.post()和$.get()方法
1 <script type="text/javascript"> 2 function test() { 3 //發送ajax請求 4 $.post("servlet/test1",{"str":"你很好","str2":"你很壞"},function(data){ 5 //回調函數里面的內容,data 6 alert(data); 7 },"html"); 8 } 9 </script> 10 </head> 11 <body> 12 <button onclick="test();">點我</button> 13 </body>
語法 ：
$.get(url, param, callback, type)
$.post(url, param, callback, type)
url------------- --請求服務器的地址
param ----------發送給服務器參數
callback-------- 服務器返回客戶端執行success函數 ，接收data參數（服務器返回數據）
type -------------指定服務器返回數據格式，如果不指定，使用response響應contextType自動識別
方式四：jquery對象.serialize()
通過serialize 方法，將form參數轉換 name=value&name=value 格式
1 <script type="text/javascript"> 2 $(function () { 3 $("#mybtn").click(function() { 4 //將form參數轉換 name=value&name=value 格式 5 var data = $("#myform").serialize(); 6 //alert(data) 7 $.post("register", data,"html") 8 }) 9 }) 10 </script> 11 </head> 12 <body> 13 <form id="myform"> 14 用戶名 <input type="text" name="username" /><br /> 15 密碼 <input type="password" name="password" /><br /> 16 愛好 17 <input type="checkbox" name="hobby" value="體育" />體育 18 <input type="checkbox" name="hobby" value="讀書" />讀書 19 <input type="checkbox" name="hobby" value="音樂" />音樂 20 <br /> 21 <input type="button" value="注冊" id="mybtn" /> 22 </form>