`

Ajax简单易懂实例教程【原创】

AjaxSQLStruts招聘MySQL 
阅读更多

jsp页面如下：

<%@ page contentType="text/html; charset=gb2312"%>

<html>
<head>
   <meta http-equiv=Content-Type content="text/html; charset=gb2312" />
   <title></title>
</head>

<body>
   <div id="body" style="padding-left: 8px">
    <CENTER>
          <form name="regForm" action="register.do" method="POST">
           <div style="width: 50%; float: left;">
            <p style="color: red; font-size: 14px; font-weight: bold;">
             &nbsp;
            </p>
            <dl>
             <dt class="logindt">
              用户名：
             </dt>
             <dd class="logindd">

              <input name="email" type="text" value="" class="input"
               onchange="ajaxCheckEmail2();" maxlength="20"
               onfocus="lblEmail.innerText='';" />
              <label id="lblEmail" class="alert"></label>
              <br>
             </dd>
             </dl>
            
             <dl>
              <dl>
               得到的值:
              </dl>
              <dd>
              <input name="value" type="text" value=""/>
              </dd>            
             </dl>
          </form>      
    </CENTER>
   </div>

<script type="text/javascript">

var show = document.getElementById("lblEmail");
  
   //ajax方法  
   var str="";
   var xmlHttp;
function createXMLHttpRequest() {  
    try{
     if (window.ActiveXObject) {      
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     }else {    
     if (window.XMLHttpRequest) {  
      xmlHttp = new XMLHttpRequest();
     }
       }   
    }catch(e){
      alert("不能创建XMLHttpRequest对象实例,请重试");
    }  
}    
   //ajax所调用的方法
   function ajaxCheckEmail2(){
        var email=regForm.elements["email"].value;
           var show = document.getElementById("lblEmail");
            ajaxCheckEmail();
   }
  
function ajaxCheckEmail() {
     createXMLHttpRequest();   
   var email = document.getElementsByName("email")[0].value;   
   var url = "numAjax.do?email="+email;
   xmlHttp.open("POST", url, true);  
   xmlHttp.onreadystatechange = callback;
   xmlHttp.send(null);
}
  
function callback(){    
   if (xmlHttp.readyState == 4) {          
      str = xmlHttp.responseText;
        //alert(str);
    if (xmlHttp.status == 200) {   
       str = xmlHttp.responseText;
                 //alert("响应的值是"+str);
                 showMessage(str);               
　　     } else {
　　        show.innerText="";
　　     }  
     }
}
  
function showMessage(str) {
      document.getElementById("value").value = str;
}
</script>

</body>

</html>

 

处理通讯的action类，用的是struts1.2的action：

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import jxl.write.Label;
import jxl.write.WritableCellFormat;
import jxl.write.WritableFont;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

public class numAjaxAction extends Action {

public ActionForward execute(ActionMapping mapping, ActionForm form,
    HttpServletRequest request, HttpServletResponse response)throws java.io.IOException {
  
   String userId_1 = request.getParameter("email");
  
   String userId = "";
   String backValue = "";//返回的数据
   userId = new String(userId_1.getBytes("8859_1"),"GB2312");
  
   //连接数据库 开始
   try{
    Class.forName("com.mysql.jdbc.Driver");
    }
     catch(java.lang.ClassNotFoundException e)
    {
      System.err.print(e.getMessage());
    }
   String url="jdbc:mysql://127.0.0.1:3306/test?autoReconnect=true&amp;useUnicode=true&amp;characterEncoding=utf-8";
   try {
    Connection conn=DriverManager.getConnection(url,"root","123456");
    String sql = " select action_name from t_pdm_action where action_code = "+userId;
   
    System.out.println("sql :"+sql);
   
    PreparedStatement prpdStmt = conn.prepareStatement(sql);
    ResultSet rs = prpdStmt.executeQuery();//收集到要的数据了
   
    if(rs.next()){
    
     backValue = rs.getString("action_name");
     System.out.println("backValue GB2312 :"+backValue);

    }
    rs.close();
    prpdStmt.close();
    conn.close();
   } catch (SQLException e) {
    e.printStackTrace();
   }

   response.setContentType("text/xml;charset=UTF-8");
    response.getOutputStream().print(backValue);
    return null;   
  
}
}

action配置文件：

    <action
      input="/"
      path="/numAjax"
      type="com.me.user.numAjaxAction" />

 

搞定！

 

分享到：
| jquery技巧总结【转】
评论
13 楼 a155069480 2011-05-06  
楼主 你这个东西 有错误
document.getElementById("value").value = str;
不应该是这个 应该是
document.getElementByName("value").value = str;
12 楼 沈冠军 2010-12-26  
changyuxin 写道
一堆代码，也称得上是教程！！！！！！

我还以为是什么教程呢，唉……
11 楼 ml365 2010-12-24  
终于可以回复了。哎。之前第一次用博客同步论坛的功能。没想到被扣分。以后绝对不把博文发论坛了。不好意思各位，这篇其实是我写给自己留档的。方便以后查看。呵呵
10 楼 magic_yao 2010-12-24  
其实吧，代码写的还不错。。。但确实太新手了
9 楼 suiye007 2010-12-21  
其实你不反对这样的代码式的，只是感觉，代码也要高这显示一下吧，这样看累人啊！论坛不是本身加了这样的功能吗？
8 楼 hxangel 2010-12-18  
changyuxin 写道
一堆代码，也称得上是教程！！！！！！

完全同意楼上的说法
7 楼 changyuxin 2010-12-18  
一堆代码，也称得上是教程！！！！！！
6 楼 jasoncool 2010-12-17  
whaosoft 写道
从发帖内容上看 就知道又快校园招聘了

这··其实讲的还是有一定水平的，比如说那寥寥无几的注释····
5 楼 whaosoft 2010-12-16  
从发帖内容上看 就知道又快校园招聘了
4 楼 knightzhuwei 2010-12-15  
yangdefeng95802 写道
这样的贴子怎么出现首页呢？

新发的帖都出现在首页
3 楼 yangdefeng95802 2010-12-15  
这样的贴子怎么出现首页呢？
2 楼 夜之son 2010-12-13  
Javakeith 写道
很快会被 隐藏下去！

++
1 楼 Javakeith 2010-12-13  
很快会被 隐藏下去！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics