AJAX自学练习 无刷新从数据库后台取数据显示

老十七王爷

老十七王爷

2016-02-19 09:44

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享AJAX自学练习 无刷新从数据库后台取数据显示的教程,热爱PS的朋友们快点看过来吧!
请求页面request.jsp
代码如下:

%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titleInsert title here/title
script language="javascript"!--
function GetXmlHttpObject(){
    var xmlHttp = null;
    try{
        xmlHttp = new XMLHttpRequest();
    }catch(e){
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;

}
function showMsg(str){
    xmlHttp = GetXmlHttpObject();
    if(xmlHttp == null){
        alert ("you browser don't support the ajax");
         return;

    }
    var url = "response.jsp";
    url = url + "?q="+ str;
    url = url + "&sid ="+ Math.random();
    xmlHttp.onreadystatechange = stateChanged;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}
function stateChanged()
{
    if(xmlHttp.readyState==4)
    {
        document.getElementById("showHint").innerHTML = xmlHttp.responseText;
    }
}
// --/script
/head
body
form name="form1" action="" method="post"
pRocarsId:/p
    select name="select1" onchange="showMsg(document.form1.select1.options[document.form1.select1.selectedIndex].value)"
        option value="140"140/option
        option value="150"150/option
    /select
    div id="showHint"Show rocars ccrn messages./div
/form
/body
/html

response.jsp
代码如下:

%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8"%
%@ page import="com.lwf.eus.util.*,java.util.*,com.lwf.eus.entity.*,com.lwf.eus.bean.*" %
html
head
titleresponse the ccrn/title
/head
body
%
    String q = request.getParameter("q");
    System.out.println("message:" + q);
    RocarsBean rocars = RocarsEntity.getRocarsListById(q);
%
table
tr
tdRocarsId/td
tdRocarsCcrn/td/tr
tr
td%=rocars.getRocarsId() %/td
td%=rocars.getCcrn() %/td
/tr
/table
/body
/html

注意这里与自学练习一不同的是,request.jsp页面用一个div来显示信息,response.jsp从数据库里面查询出来的内容放在table标签里,其它的html标签不会在div里面显示。
展开更多 50%)
分享

猜你喜欢

AJAX自学练习 无刷新从数据库后台取数据显示

Web开发
AJAX自学练习 无刷新从数据库后台取数据显示

AJAX 自学练习 无刷新提交并修改数据库数据并显示

Web开发
AJAX 自学练习 无刷新提交并修改数据库数据并显示

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

AJAX无刷新更新数据

Web开发
AJAX无刷新更新数据

AJAX 数据库实例

Web开发
AJAX 数据库实例

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

显示数据库记录

编程语言 网络编程
显示数据库记录

Ajax技术(WEB无刷新提交数据)

Web开发
Ajax技术(WEB无刷新提交数据)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

在Android 模拟器上安装和卸载APK包的方法

在Android 模拟器上安装和卸载APK包的方法

怎样邀请好友加入魔法卡片游戏?

怎样邀请好友加入魔法卡片游戏?
下拉加载更多内容 ↓