jsp中，ajax提交表单用法分类： ajax 2011-07-29 14:59 3746人阅读评论(0) 收藏举报 jspajaxinputbuttonactionfunction 一：-优快云博客

本文介绍如何在JSP页面使用Ajax进行表单提交，包括HTML表单元素的设置和JavaScript函数的编写，实现登录功能并根据服务器响应提示用户。

jsp中，ajax提交表单用法

分类： ajax 2011-07-29 14:59 3746人阅读评论(0) 收藏举报

 
 jsp
 ajax
 input
 button
 action
 function

一：

jsp登录页面：

[html]view plaincopy 
    
 <body>  
         <h1 align="center">用户登录</h1>  
         <div align="center" style="font-size: 20px;">  
             <form id="loginForm" name="loginForm" action="${pageContext.request.contextPath}/user/login" method="post">  
               <table  align="center">  
                       <tr>  
                         <td>用户名：</td>  
                         <td colspan="2"><input type="text" name="username" id="username" /></td>  
                       </tr>  
                       <tr>  
                         <td>密  码：</td>  
                         <td colspan="2"><input type="password" name="password" id="password" /></td>  
                       </tr>  
                         <td colspan="3" align="center">  
                             <input id="login_submit_button" type="button" value="登录"  onclick=<span style="color:#ff00;">"loginSubmit</span>(this.form);" />  
                         </td>  
                       </tr>  
                 </table>  
             </form>  
         </div>  
         <div align="center" style="padding:30px;font-size: 15px;">  
             <span style="color: red;">注意：</span>  
             <span  style="color: blue;">  
                 只有登录用户才可以上传图片。  
             </span>  
         </div>  
  </body>  

二，js写法：

[javascript]view plaincopy 
    
 <head>  
         <title>用户登录</title>  
         <script src="${pageContext.request.contextPath}/js/jquery-1.4.min.js" type="text/javascript"></script>  
     </head>  
     <script type="text/javascript">  
         function loginSubmit(form) {  
                 $.ajax( {  
                     type : "POST",  
                     url : "${pageContext.request.contextPath}/user/login",  
                     data : $("#loginForm")<span style="color:#ff00;">.serialize</span>(),  
                     success : function(msg) {  
                         if ((msg == "true")) {  
                             alert("登录成功。");  
                             window.location.href = "${pageContext.request.contextPath}/add_user";  
                         } else {  
                             if(msg=="false"){  
                                 alert("登录失败。");  
                             }  
                         }  
                     }  
                 });   
               
     }  
     </script>  