ajax

来源：互联网发布：sql安装提示之前挂起编辑：程序博客网时间：2024/06/18 18:19

用ajax做搜索框的模糊快捷查询还需完善

index.jsp

<%--  Created by IntelliJ IDEA.  User: Administrator  Date: 2017/11/9  Time: 20:30  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>  <title>$Title$</title>  <script type="text/javascript" src="${pageContext.request.contextPath}/js/myJS.js"></script></head><script type="text/javascript">   window.onload=function () {       var name=document.getElementById("id");       name.onblur=function () {         var namee=this.value;         var xhr=getXMLHttpRequest();         xhr.onreadystatechange=function () {             if(xhr.readyState==4){                 if (xhr.status==200){                     var str=xhr.responseText;                 }             }         }           xhr.open("get","${pageContext.request.contextPath}/servlet/demo1?name="+namee);           xhr.send(null);       }   } </script><body>    <h1>搜索界面</h1>搜索：<input type="text" id="id"  placeholder="搜索"/>  <div ></div>    <div  style="height: 300px;width: 100px;border: solid red;position: absolute;left:20px;top:100px"></div></body></html>

function getXMLHttpRequest() {    var xmlhttp;    if (window.XMLHttpRequest){        xmlhttp=new XMLHttpRequest();    }else {        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");    }    return xmlhttp;}

web.xml

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"         version="3.1">  <servlet>        <servlet-name>servlet1</servlet-name>        <servlet-class>com.servlet.Demo1</servlet-class>    </servlet>    <servlet-mapping>        <servlet-name>servlet1</servlet-name>        <url-pattern>/servlet/demo1</url-pattern>    </servlet-mapping></web-app>

com.servlet.demo1类

package com.servlet;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.PrintWriter;public class Demo1 extends HttpServlet{    public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        String[] array = {"assssssss", "bass", "cass","assssssss", "bass", "cass","mmmmmmmmmmmmmm"};        String name=(String)req.getParameter("name");        System.out.print(name);        String str="";        for (int i=0;i<array.length;i++){            if (array[i].contains(name)){                if(i>0){                    str+=",";                }                str+=array[i];            }        }        resp.getWriter().print(str);        System.out.print(str);    }    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        doGet(req,resp);    }}

阅读全文

0 0