目录 jquery ajax的应用
1 表单提交
2 ajax的提交（ajax post get）
普通的表单提交
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; pageContext.setAttribute("basePath",basePath); %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'login.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"> </head> <!-- <script src="js/jquery_1.83min.js"></script>--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <body> <div> <form id="form1" action="" > <input type="text" name="username"><br> <input type="text" name="password"><br> <input type="button" value="登录" id="but1"> </form> </div> <script type="text/javascript"> $('#but1').click(function(){ $('#form1').attr({'action':"${pageScope.basePath}login",'method':"post"}).submit(); }); </script> </html>
$.ajax
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; pageContext.setAttribute("basePath",basePath); %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'login.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"> </head> <!-- <script src="js/jquery_1.83min.js"></script>--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <body> <div> <form id="form1" action="" > <input type="text" name="username"><br> <input type="text" name="password"><br> <input type="button" value="登录" id="but1"> </form> </div> <script type="text/javascript"> $('#but1').click(function(){ var user={username:"sunfan",password:'helloworld'}; $.ajax({ url:"login", //访问地址--action地址 type:"post", //提交方式 data:user, //提交给服务器的数据 success:function(reData){ //回调函数的处理方式 alert(reData); } }); }); </script> </html>
$.post
$('#but1').click(function(){ var user={username:"sunfan",password:'helloworld'}; $.post( //提交方式 "login", //访问地址 user, //提交给服务器的数据 function(reData){//回调函数的处理方式 alert(reData); } ); });
$.get与post类似只是提交的方式不同
$('#but1').click(function(){ var user={username:"sunfan",password:'helloworld'}; $.get( "login", user, function(reData){ alert(reData); } ); });