方式一：
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>