javaweb基础----使用jquery的ajax

　　方式一：

 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>

先想再做，不想不做。