jQuery下的Ajax

最新推荐文章于 2024-07-15 15:38:12 发布

pepper~

最新推荐文章于 2024-07-15 15:38:12 发布

阅读量86

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_38914062/article/details/96869289

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

无刷新技术登录

//html页面
  <script type="text/javascript">
    $(
    	function()
    	{
    		$("#btnOK").click(
    			function()
    			{
    				$.ajax({
    					url:"http://localhost:8080/WebClient20190722/T01", //相当于我们action
    					type:"POST", //相当于method
    					data:"username=" + $("#username").val() + "&password="+$("#password").val(), //传递的参数
    					//data选项既可以包含一个查询字符串，比如 key1=value1&amp;key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置processData选项为false来回避。
    					//data:{username:$("#username").val(),password:$("#password").val()},
    					success:function(data) //异步请求成功后，响应给客户端的数据
    					{
    						alert(data);
    					}  	
    				});	
    			}
    		);	
    	}
    );
    </script>

//servlet页面
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		String msg = "登录失败";
		if("admin".equals(username)&& "123456".equals(password)) {
			msg="登陆成功";
		}
		try {
			Thread.sleep(5000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		PrintWriter out = response.getWriter();
		out.print(msg);
		out.close();
	}

//练习代码2
//html
<!DOCTYPE html>
<html>
  <head>
    <title>T01.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript">
    $(
    	function()
    	{
    		$("#btnOK").click(
    			function()
    			{
    				$("#msg").ajaxStart(
    					function()
    					{
    						$("#msg").css("display","block");
    						$("#msg").html("正在登录中......");
    					}
    				);
    				
    				$("#msg").ajaxComplete(
    					function()
    					{
    						$("#msg").css("display","none");	
    					}
    				);
    			
    				$.post("http://localhost:8080/WebClient20190722/T01",
    					{
    						username:$("#username").val(),
    					 	password:$("#password").val()
    					 },
    					function(data) //异步请求成功后，响应给客户端的数据
    					{
    						alert(data);
    					}
    				);
    			}
    		);	
    	}
    );
    </script>
  </head>
  
  <body>
    用户名：<input type="text" name="username" id="username" />
  密码：<input type="text" name="password" id="password" />
  <br/>
  	<input type="button" name="btnOK" id="btnOK" value="Login"  />
  	<div style="display: none;" id="msg"></div>
  </body>
</html>

//servlet页面
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		
		String msg = "登录失败";
		if( "admin".equals(username) 
				&& "123456".equals(password) )
		{
			msg = "登陆成功";
		}

		try {
			Thread.sleep(5000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.print(msg);
		out.flush();
		out.close();

//练习三
 <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
    <script type="text/javascript">
    $(
    	function()
    	{
    		$("#btnOK").click(
    			function()
    			{
    				$.ajax({
    					url:"http://localhost:8080/WebClient20190722/T02", //相当于我们action
    					type:"POST", //相当于method
    					dataType:"json",
    					success:function(data) //异步请求成功后，响应给客户端的数据
    					{
    						//eval( "var obj = " + data );
    						for( var i = 0 ; i < data.length ; i++ )
    						{
    							var row = data[i];
    							$("div").append( "<span style='color:pink;'>" + row.sid +"..."+row.sname + "</span><br/>" );
    						}
    					}
    				});	
    			}
    		);	
    	}
    );
    </script>