jQuery结合Ajax示例

时间：2010-08-17 来源：qdl2010

刚刚拼接jQuery，发现结合Ajax很好用，代码量比起传统Ajax少了许多，下面是一个小例子： Html页面代码： <html>
<head>
  <title>JQuery测试页面</title>
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script language="javascript">
   $(document).ready(function(){
    $("#submitButton").click(function(){
     $.ajax({
      type:"post",
      url:"http://localhost/jQuery_test.jsp",
      data:{username:$("#username").val(),password:$("#password").val()},
      //dataType:"xml";
      //dataType不指定，则jQuery将自动根据 HTTP包MIME信息返回responseXML或responseText，并作为回调函数参数传递
      beforeSend:function(XMLHttpRequest){
       //数据加载部分
       $("#process").html("数据加载中...");
      },
      success:function(data,textStatus){
       //数据成功加载
       //alert(data);
       //var username = data.getElementsByTagName("username")[0].firstChild.nodeValue;
       //var password = data.getElementsByTagName("password")[0].firstChild.nodeValue;
       $(data).find("info").each(function(i){
        if(i==0){
         var username = $(this).children("username").text();
         var password = $(this).children("password").text();
         $("#result").html("用户名:"+username+"<br>密码:"+password);
        }
       });
      },
      complete:function(){
       //完成处理后
       $("#process").html("");
      },
      error:function(){
       alert("加载数据失败！");
      }
     });
    });
   });
  </script>
  <style type="text/css">
   .highlight{
    background-color:blue;
   }
  </style>
</head>
<body>
  <div id="info"></div>
  <div id="result"></div>
  <form name="form1" action="">
   用户名：<input type="text" id="username" name="input1"><br><br>
   密　码：<input type="text" id="password" name="input2"><br><br>
   <input id="submitButton" type="button" value="提交">
  </form>
</body>
</html> 后台JSP代码： <%@ page contentType="text/html;charset=utf-8"%>
<%
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
String result = "<info>";
if(username!=null){
  //页面采用get方式提交过来的话，这里需要编码转换
  //username = new String(username.getBytes("ISO8859-1"),"utf-8");
  result += "<username>"+username+"</username>";
}
if(password!=null){
  //password = new String(password.getBytes("ISO8859-1"),"utf-8");
  result += "<password>"+password+"</password>";
}
result += "</info>";
response.setContentType("text/xml;charset=utf-8");
response.setHeader("Cache-control", "no-cache");
out.println(result);
%>