• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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里面显示。
    您可能感兴趣的文章:
    • ajax 数据库中随机读取5条数据动态在页面中刷新
    • ajax+asp无限级分类树型结构(带数据库)
    • ajax php 实现写入数据库
    • AJAX 自学练习 无刷新提交并修改数据库数据并显示
    • 基于asp+ajax和数据库驱动的二级联动菜单
    • ASP+AJAX+ACCESS数据库实例讲解三个步骤分享
    • ajax异步刷新实现更新数据库
    • ajax 登录功能简单实现(未连接数据库)
    • ajax对注册名进行验证检测是否存在于数据库中
    • ajax读取数据库内容实现二级联动下拉选择菜单示例
    • jquery+ajax+C#实现无刷新操作数据库数据的简单实例
    • Ajax动态加载数据库示例
    • 使用wordpress的$wpdb类读mysql数据库做ajax时出现的问题该如何解决
    上一篇:jsp 自定义标签实例
    下一篇:AJAX 自学练习 请求与显示
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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