jquery实现异步操作

发表时间:2017-05-16 15:50:51 浏览量( 15 ) 留言数( 0 )

学习目标:

1、了解Java的历史

2、为什么要学习Java语言

3、端正学习态度


学习过程:

大家可以看到,在上一节中我们实现一个ajax非常麻烦,所以现在很多框架都对ajax进行了封装,jquery是其中的一员,jquery是一个非常轻量级的框架,实用它实现ajax变得非常简单。

一、方法介绍

jquery封装的ajax方法比较多,底层实现是jQuery.ajax([options]),这个方法可以实现ajax大部分的底层,不过使用起来比较麻烦,我们比较常用的ajax方法有jQuery.get(url, [data], [callback], [type])jQuery.post(url, [data], [callback], [type])两个方法,这两个方法的参数是一样,只不过一个是使用get方法提交,一个使用post方法提交,这里我们就以get方法介绍,post方法使用是一样的。方法参数说明如下:

url  String    待载入页面的URL地址。

data (可选)Map   待发送 Key/value 参数。

callback (可选)Function   载入成功时回调函数。

type (可选)String  返回内容格式,xml, html, script, json, text, _default。

二、下面我们使用jquery改写上一节课的登录示例。

后台servlet都不需要修改,页面实现代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="java.text.SimpleDateFormat"%>
<%
	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 'ajax2.jsp' starting page</title>

<script type="text/javascript" src="js/jquery-1.6.4.js"></script>

<script type="text/javascript">

$(document).ready(function(){
   
     $("#loginsubmit").click( function () {       
        var username1=$("#username").val();
        var password1=$("#password").val();
         $("#loginmessage").html("登陆中....");
        //异步登陆
        $.post("login", { username: username1, password: password1 },
          function(data){         
               if(data=="1"){        
	                  $("#loginmessage").html("登陆成功");
	                  $("#loginform").hide();                
                 }else{               
                     $("#loginmessage").html("登陆失败");
                     $("#password").val("");                
           }
          
         });
       
     });
});
	
</script>
</head>
<body>

	<span id="loginmessage"></span>
	<form id="loginform">
		用户名: <input name="username" id="username" /> <br /> 密 &nbsp;码:<input
			name="password" id="password" type="password" /> <br /> <input
			type="button" id="loginsubmit" value="提交">
	</form>
</body>
</html>

对比上一节课,代码简洁了很多。