ajax实例及实现文本框异步搜素

search.jsp(WebContent/jsp/search.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>Search</title>
  <script type="text/javascript">

    /***单机文本框时检查文本框的值***/
    function changeValue(){
        var tab = document.getElementById("tabId");
        var inputStr = document.getElementById("inputStr");
        var inputValue = inputStr.value;
        if(inputStr.value==null || inputStr.value==""){
            tab.style.display=‘none‘;
        }else{
            ajax(inputValue);
            tab.style.display=‘table‘;
        }
    }
    /***当按下或释放键时检查文本框的值***/
    function checkField(obj){
        var tab = document.getElementById("tabId");
        var inputStr = document.getElementById("inputStr");

        var inputValue = inputStr.value;

        if(obj==null || obj==""){
            tab.style.display=‘none‘;
        }else{
            tab.style.display=‘table‘;
            ajax(inputValue);
        }
    }
    /***单机td时给文本框赋值***/
    function display(obj){
        var tab = document.getElementById("tabId");
        document.getElementById("inputStr").value=obj.innerHTML;
        tab.style.display=‘none‘;
    }
    /***onmouseover事件给文本框赋值***/
    function setInputValue(obj){
        var tab = document.getElementById("tabId");
        document.getElementById("inputStr").value=obj.innerHTML;
    }

    function ajax(param) {
        //先声明一个异步请求对象
        var xmlHttpReg = null;
        if (window.ActiveXObject) {//如果是IE
            xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
        }
        //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
        if (xmlHttpReg != null) {
            xmlHttpReg.open("post", "/Test/SearchServlet?param="+param, true);
            xmlHttpReg.send(null);
            xmlHttpReg.onreadystatechange = doResult; //设置回调函数
        }
        //回调函数
        //一旦readyState的值改变,将会调用这个函数,readyState=4表示完成相应

        //设定函数doResult()
        function doResult() {
            if (xmlHttpReg.readyState == 4) {//4代表执行完成
                if (xmlHttpReg.status == 200) {//200代表执行成功
                    var resultValue = xmlHttpReg.responseText;
                    if(resultValue!=null){
                        document.getElementById("tabId").innerHTML=resultValue;
                    }
                }
            }
        }
    }
  </script>
</head>
<body>
    <input type="text" name="inputStr" id="inputStr" onclick="changeValue()" onkeydown="checkField(this.value)" onkeyup="checkField(this.value)">
    <table style="border:1px solid;display:none;cellpadding:0" width="153px" id="tabId">
        <!--
        <tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">aaaaa</td></tr>
        <tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">bbbbb</td></tr>
        <tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">ccccc</td></tr>
        <tr height="25px"><td onclick="display(this)" onmouseover="setInputValue(this)">ddddd</td></tr>
         -->
    </table>
</body>
</html>

SearchServlet(com.test.srevlet.SearchServlet)

package com.test.srevlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/SearchServlet")
public class SearchServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public SearchServlet() {
        super();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String param = request.getParameter("param");
        StringBuffer returnStr = new StringBuffer();
        String[] strs = null;
        if(param.endsWith("aa")){
            strs=new String[]{"a","aa","aaa","aaaa"};
            for (int i = 0; i < strs.length; i++) {
                returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\">");
                returnStr.append(strs[i]);
                returnStr.append("</td></tr>");
            }
        }else if(param.endsWith("aas")){
            strs=new String[]{"sas","saas","saaas","saaaas"};
            for (int i = 0; i < strs.length; i++) {
                returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\">");
                returnStr.append(strs[i]);
                returnStr.append("</td></tr>");
            }
        }else if(param.endsWith("aass")){
            strs=new String[]{"f","faa","faaa","faaaa"};
            for (int i = 0; i < strs.length; i++) {
                returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\">");
                returnStr.append(strs[i]);
                returnStr.append("</td></tr>");
            }
        }else{
            returnStr.append("<tr height=\"25px\"><td onclick=\"display(this)\" onmouseover=\"setInputValue(this)\"></td></tr>");
        }

        System.out.println(returnStr.toString());
        response.getWriter().write(returnStr.toString());
    }

}
时间: 2024-11-04 10:32:03

ajax实例及实现文本框异步搜素的相关文章

限定文本框只能输入数字实例代码

限定文本框只能输入数字实例代码:有时候文本框中可以输入的内容只能够限定为数字,比如邮编和电话号码等.实现此中效果的方法有多种,比较常用的比如有正则表达式方式,不过这里咱们不采用这个,下面介绍一下如何通过keyCode属性值实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&

jQuery中提交按钮的灰色与恢复,文本框赋值

1.按钮的id为btnzhuce ==> 控制按钮为禁用: $("#btnzhuce").attr({"disabled":"disabled"}); ==>控制按钮为可用 $("#btnzhuce").removeAttr("disabled");//将按钮可用 2.文本框赋值 jquery 文本框赋值是利用了id来取,然后利用了val来设置对应文本输入框的值哦,还就是jquery定义增加cs

Ajax - 异步处理(点击变成文本框并修改)

效果: 对应的文档结构: Test.aspx 前台代码: 引入JQuery(jquery-1.8.3.min.js). 引入自己所写的JS代码(UserJS.js). <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; cha

关于ajax+jsp实现异步校验用户名是否存在的实例(.txt文本)

<html> <head> <title>用户注册</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script language="javascript" type="text/javascript"> <!-- //定义用于存储XMLHttp

解决OneThink中无法异步提交kindeditor文本框中修改后的内容

最近在使用OneThink中自带的kindeditor编辑器的时候,保存草稿的时候,输入的内容总是不能够保存到后台.如下图 通过分析URL,发现原来content值为空 明明有值,为什么是空呢?但是如果不采用异步方式提交表单的话,则可以获取到输入值.开始一直以kindeditor为是ajax的问题,最后,查阅资料才知道原来是kindeditor的问题.因为在异步提交数据的时候,并没有将kindeditor中输入的值,同步到对应的文本框上.正确的做法是,当kindeditor失去焦点的时候,就进行

AJAX 控件集之TextBoxWatermark(水印文本框)控件

功能:       可以让TextBox控件初始化的时候拥有水印文字.属性:    TargetControlID :要使用具有水印效果的TextBox控件ID.    WatermarkCssClass :指定水印文字的CSS样式表.    WatermarkText :显示在TextBox控件的水印文字内容. 代码实例: <asp:Panel ID="panIntTemp" runat="server" GroupingText="新增资料&qu

Ajax和Json实现后台传集合给前台并赋值文本框-----Ajax\Json\JQuery

功能:放两个文本框和一个确定按钮,确定按钮绑定点击事件,点击确定就加载后台数据库中的数据,显示在文本框中. 基础知识:JQuery  ajax异步 .eval() .each() json数据 1.HTML文件 <div id="Text"> <input type="text" id="comment1" name="t_A21" numberID="one" value="&

jsp+ajax实现无刷新鼠标离开文本框即验证用户名

欢迎大牛提意见 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名,操作如下:新建一个输入页面,起名为input.jsp, [java] <%@ page contentType="text/html; charset=utf-8"%> <html> <head> <title>jsp+ajax实现无刷新_鼠标离开文本框即验证用户名</title> <meta http-equiv="Content-Typ

自动完成下拉框 Select2 关键字搜索的实例(本地数据与异步获取)

最终效果 首先我们要有一个基础的文本框 <input name="test" type="hidden" id="userSelect" style="width: 600px" value="上海^漳州" /> 使用本地数据的写法 $('#userSelect').select2({ placeholder : "请输入", minimumInputLength : 1,