jquery与ajax

最新推荐文章于 2024-03-13 07:00:00 发布

sanjiaoqq

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量78

点赞数

分类专栏： jQuery 文章标签： jquery与AJAX

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：

$.ajax({

type : "GET",

contentType: "application/x-www-form-urlencoded; charset=utf-8",

url : "ServiceServlet",

data : "username="+username+"&password="+password,

dataType : "xml",

success : callback,

error:callbackErr

});

下面是jQuery官方给出的完整的Ajax事件列表：

·ajaxStart (Global Event)
This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.

· beforeSend (Local Event)
This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)

· ajaxSend (Global Event)
This global event is also triggered before the request is run.

· success (Local Event)
This event is only called if the request was successful (no errors from the server, no errors with the data).

· ajaxSuccess (Global Event)
This event is also only called if the request was successful.

· error (Local Event)
This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).

· ajaxError (Global Event)
This global event behaves the same as the local error event.

· complete (Local Event)
This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.

· ajaxComplete (Global Event)
This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.

·ajaxStop (Global Event)
This global event is triggered if there are no more Ajax requests being processed.

具体的全局事件请参考API文档。

完整代码示例：前段

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript"  src="jquery-1.8.3.js"></script>
	<script>
	
    function doConfig(){
	   
	 //  var username = document.getElementById("username").value;
	 //  var password = document.getElementById("password").value;
	   var username = $("#username").val();
	   var password = $("#password").val();
	   $.ajax({
		        type : "GET",
		        contentType: "application/x-www-form-urlencoded; charset=utf-8",
		        url : "ServiceServlet",
		        data : "username="+username+"&password="+password,
		        dataType : "xml",
		        success : callback,
		        error:callbackErr
		    }); 
	   
	   }
	   function callback(data){
	  
	    var  name ="";
	     $(data).find('service').each(function(i){
	        name=$(this).find('info').text();
	      });
 		  alert(name);
	   }
	  function callbackErr(data){
	   
	   alert("error");
	   }
	</script>
	
	
  </head>
  
  <body>
    <table>
         <tr>
            <td>用户名：</td>
            <td><input id="username" /></td>
         </tr>
         <tr>
            <td>密码：</td>
            <td><input id="password" /></td>
         </tr>
         <tr>
            <td></td>
            <td><input type="submit" οnclick="doConfig()" /></td>
         </tr>
    </table>
  </body>
</html>

后台代码：

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class ServiceServlet extends HttpServlet {

 
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		 doPost(request,response);
	}
 
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		   String username = request.getParameter("username");
		   String password = request.getParameter("password");
		   
		   System.out.println("用户名："+username+"密码："+password);
		   response.setContentType("text/xml");
		   response.setCharacterEncoding("utf-8");
		   response.getWriter().write("<?xml version=\"1.0\" encoding=\"utf-8\"?><service><info>success</info></service>");
		   
	}

	 
	public void init() throws ServletException {
	}

}

sanjiaoqq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery与ajax

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：$.ajax({type : "GET",contentType: "application/x-www-form-urlencoded; charset=utf-8",url : "ServiceServlet",data : "u...
复制链接

扫一扫

专栏目录