Jquery之Ajax

<%@ page pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jquery get</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"> <mce:script src="js/jquery-1.2.6.js" mce_src="js/jquery-1.2.6.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $(function(){ $('.sumbit').click(function(){ if($('#account').val().length==0){ $('.hint').html("用户名不能位空!!!").css({"color":"#ffoo11","background":"blue"}); } else{ $.get("jqueryAjax","account="+$('#account').val(), function(data){ $('.hint').html(data).css({"color":"#ffoo11","background":"green"}); }); } }); }); // --></mce:script> </head> <body> <h3 align="center">jquery AjaX</h3> <hr> <label>请输入用户名 :</label> <input id="account" name="account" type="text"> <input class="sumbit" type="button" value="检测"> <div class="hint"> </div> </body> </html> <%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jquery ajax</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"> <mce:script src="js/jquery-1.2.6.js" mce_src="js/jquery-1.2.6.js" type="text/javascript"></mce:script> <mce:script language="javascript"><!-- $(function(){ $('.sumbit').click(function(){ if($('#account').val().length==0){ $('.hint').text("用户名不能位空").css({"background-color":"green"}); } else{ $.ajax({ url:'jqueryAjax', data:{account:$('#account').val()}, error:function(){ alert("error occured!!!"); }, success:function(data){ $('body').append("<div>"+data+"</div>").css("color","red"); } });} }); }); // --></mce:script> </head> <body> <h3 align="center">jquery AjaX</h3> <hr> <label>请输入用户名 :</label> <input id="account" name="account" type="text"> <input class="sumbit" type="button" value="检测"> <div class="hint"> </div> </body> </html>  

 

 

<%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jquery ajax</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"> <mce:script src="js/jquery-1.2.6.js" mce_src="js/jquery-1.2.6.js" type="text/javascript"></mce:script> <mce:script language="javascript"><!-- $(function(){ $('.sumbit').click( function(){ if($('#account').val().length==0){ $('.hint').text("The account is cant't be null").css({"color":"red","background-color":"yellow"}); } else{ $.post("jqueryAjax","account="+$('#account').val(),function(data){ $('.hint').text(data).css({"color":"red","background-color":"yellow"}); }) } }); }); // --></mce:script> </head> <body> <h3 align="center">jquery Ajax</h3> <hr> <label>请输入用户名 :</label> <input id="account" name="account" type="text"> <input class="sumbit" type="button" value="检测"> <div class="hint"> </div> </body> </html>  

 

 

你可能感兴趣的:(Jquery之Ajax)