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

请求页面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">
<title>Insert 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">
<p>RocarsId:</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>
<title>response the ccrn</title>
</head>
<body>
<%
    String q = request.getParameter("q");
    System.out.println("message:" + q);
    RocarsBean rocars = RocarsEntity.getRocarsListById(q);
%>
<table>
<tr>
<td>RocarsId</td>
<td>RocarsCcrn</td></tr>
<tr>
<td><%=rocars.getRocarsId() %></td>
<td><%=rocars.getCcrn() %></td>
</tr>
</table>
</body>
</html>

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

赞 (0)

相关推荐

  • ajax+asp无限级分类树型结构(带数据库)

    IE测试通过,FF有点小BUG Cls_Leibie.asp 复制代码 代码如下: <% '数据库字段为类属性,添加.删除.修改.操作检查等函数为类的方法 Class Cls_Leibie Private nClassID,sClassName,nParentID,sParentPath,nDepth,nRootID,nChild,nOrderID,sFilePath '定义私有变量(类的属性,即数据库字段对应的变量) Private rs,sql,ErrorStr Private Sub Cl

  • 使用wordpress的$wpdb类读mysql数据库做ajax时出现的问题该如何解决

    无聊做了个www.jiazhuangma.com,技术不过关写不好后台,就想直接读wordpress里的数据.做ajax读后台数据时在网上随便搜了一段代码使用wordpress $wpdb类读mysql数据库,就是这么一随便,搜到了别人的去头去尾的code,开始了我的改错之旅. 主要问题有: 1,non-object 2,json中汉字,/被转码 3,chrome可以正常访问php文件,ie显示http 404,ajax时头部显示404,但是响应正文正确,是我想要的json. 先贴上网上搜到的代

  • 基于asp+ajax和数据库驱动的二级联动菜单

    index.asp 页面代码 复制代码 代码如下: <!--#include file="conn.asp" --> <% set cmd = conn.execute("select bigclassid,bigclassname from bigclass") tempid=cmd("bigclassid") %> <select name="menu" onChange="gets

  • ajax 登录功能简单实现(未连接数据库)

    简单的登录功能(未连接数据库) 复制代码 代码如下: <script src="Jquery1.7.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#tijiao').click(function () { var username = $('#username').val(); va

  • jquery+ajax+C#实现无刷新操作数据库数据的简单实例

    我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容 我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页 页面中我们放置一个Div容器用来存放返回的内容 <div id="comment"><img src="images/Wait.gif&quo

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

    request.jsp页面中有rocarsId,和ccrn两个text. 对应在数据库中表格 rocars表的msg_id,ccrn两个字段.现在要实现在界面上修改ccrn的值,ajax提交到response.jsp页面,并调用RocarsEntiy.updateCcrn方法更新对应的ccrn,最后无刷新显示 代码: request.jsp 复制代码 代码如下: <%@ page language="java" contentType="text/html; chars

  • ajax php 实现写入数据库

    首先需要一个带输入表格. 复制代码 代码如下: <!-- To change this template, choose Tools | Templates and open the template in the editor. --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title

  • ajax异步刷新实现更新数据库

    ajax异步刷新实现更新数据库

    上篇文章都是关于界面的东西,下面写关于如何把无刷新的把数据写入到数据库中. 当我们改变某一个人或某几个人的某项分值实现无刷新写入数据库. 首先,我们需要声明XMLHttpRequest对象 复制代码 代码如下: //声明XMLHttpRequest对象 var xmlHttp; function createXMLHTTP() { if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //Mozilla浏览器 } else if

  • ajax 数据库中随机读取5条数据动态在页面中刷新

    ajax 数据库中随机读取5条数据动态在页面中刷新

    不能用数据库中的Top,后面发现了用这样一个方法可以实现...现就这个方法总结写了一个页面.有兴趣的朋友们可以一起学习下.... 前台代码:  复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxRandomData.aspx.cs" Inherits="ajaxRandomData" %> <!DOCTYPE html

  • ajax对注册名进行验证检测是否存在于数据库中

    这个是我在网上看到的一个有错的ajax 我改正确了,却找不到那个帖子了. 用servlet验证: 复制代码 代码如下: package Servlet; import java.io.*; import java.sql.*; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import jav

  • ajax读取数据库内容实现二级联动下拉选择菜单示例

    复制代码 代码如下: <PRE class=javascript name="code"></PRE><PRE class=javascript name="code">---------------------这是ajax(javascript)代码---------------------------</PRE><PRE class=javascript name="code">&l

  • Ajax动态加载数据库示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

  • ASP+AJAX+ACCESS数据库实例讲解三个步骤分享

    看完本篇ajax实例教程,我相信你也可以轻松做出一个初级的AJAX应用. 你也可以直接访问:http://www.jb51.net/codes/57017.html 下载ajax教程的源码示例. 好,下面我们就始一步步让你了解AJAX+ASP基础应用,我们将分三步讲解,如下. 1. 前台AJAX代码(javascript)的创建. 2. 后台服务端ASP AJAX代码的编写. 3. ASP+AJAX+数据库的实例演示及讲解. 第一步:前台AJAX代码(javascript)的创建. 我们先创建一

随机推荐