ajax

最新推荐文章于 2022-06-19 13:50:53 发布

qq_40898667

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量111

点赞数 1

本文链接：https://blog.csdn.net/qq_40898667/article/details/78507835

版权

用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);

    }

}

qq_40898667

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax

用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
复制链接

扫一扫