jsp中jquery用法一步刷新驗證用戶名是否存在

時間 2019-12-13

原文原文鏈接

<script type="text/javascript">     
  
/*   $(document).ready(function(){
      
      var id="ha";
      var s="<td>用戶名：<select name='"+id+"'>"+"<option>sdfsdf</option></select>"
      
      
   
     $("#f").html(s);
  
  
  
  
  })
   */
  
  
  
  
  function func(){
  
  
  document.form1.action="index.jsp?opt=0";
  document.form1.submit();
  
  }
  
  
  
  function funcs(){
  
    if(!document.getElementById("name").value) 
  {
  
  document.getElementById("name").value='請輸入用戶名';document.getElementById("name").style.color='#999';
  
  }
  else{
  var name=document.getElementById("name").value;
   $.ajax({
        type: "POST",
        url:"my.jsp",
        data:"name="+name,
            
        
        
        
        success:function(name){
        document.getElementById("tip").innerHTML=name;
    
        
    
        
        }
    });
  
  }
  }
  
  
  
  
  function focus(){
  alert("wocaonima");
  
//   if(document.getElementById("user.name").value=='input') document.getElementById("user.name").value="";
  if(document.getElementById("name").value=='input') 
  {
  
  document.getElementById("name").value="";
  alert("haobuhao1");
  this.style.color='#000';
  }
  }


  </script>
  

  
  
<!--   onfocus="if(value=='請輸入用戶名') {value='';this.style.color='#000';}" onblur="if(!value) {value='請輸入用戶名';this.style.color='#999';}" -->
  
  
  <%
  
if(session.getAttribute("username")==null)
  {
  
   %>
  <body>
  <center>
  <form method="post" name="form1">
  <table>
  <tr><div id="f"><td>用戶名：<input type="text" id="name" name="name" onfocus="if(value=='請輸入用戶名') {value='';this.style.color='#000';}" onblur="funcs()"></td></div><td><label id="tip"></label></tr>
  <tr><td>密碼：<input type="password" name="password"></td></tr>
 <tr><td> <input type="button" value="提交" onclick="func()" align="middle">
 
 </td></tr>
  
  </table></form> 
  
    </center>
  </body>
  
  
  
  
  <%}
  
  else{
  
  
 %> 
  
  <script type="text/javascript">
  
 window.location.href="index.jsp";
 
 
  
  </script>
  
  
  
  
  
  <%
  }
  
  
   %>

my.jsp爲ajax的處理頁面，代碼以下javascript

<%@page import="java.io.PrintWriter"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.gree.ConnDB" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


  
  
  
  <% 
  String name= request.getParameter("name");
  String data="";
  int result=0;
//  response.setContentType("text/html");
   PrintWriter outs=response.getWriter();
 if(name==null) {
 name="";
 System.out.print("haha");    
 }
 ConnDB db=new ConnDB();
  result=db.test(name);
 
 if(result==0)  data="<p style='color:red;'> 該用戶名不存在！</p>";
 else data="<p style='color:blue;'> 用戶名輸入正確</p>";
 outs.write(data);
 


 



  %>