AJAX(prototype)实现的局部刷新搜索框实例

最新推荐文章于 2023-02-07 23:14:57 发布

iteye_11748

最新推荐文章于 2023-02-07 23:14:57 发布

阅读量269

点赞数

分类专栏： AJAX 文章标签：数据库 java javascript ViewUI

本文链接：https://blog.csdn.net/iteye_11748/article/details/82410371

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AJAX是个老话题了，传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。
不说那么多废话了，直接入题：
首先，写jsp页面：

< %@ page language ="java" contentType ="text/html; charset=UTF-8" pageEncoding ="UTF-8"% >
< %@ taglib prefix ="ww" uri ="/webwork" % >
<%
    String path=request.getContextPath();
%>

<!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 >TimeCard Manager Platform </title>
< script src="<%=path% >/js/prototype.js"> </script>
     < script >
      function getXML(){
      / /局部请求地址
      var url="searchAction.action";
       //获取用户当前输入的内容
      var inputvalue=document.getElementById("itext").value;
       //使用prototype函数构造xmlhttprequest对象
      var myAjax = new Ajax.Request(
      url,
      {
          //请求方法为post
          method:'post',
           //设置参数为 inputtext=inputtext
          parameters:"inputtext="+inputvalue,
           //设置回调函数
          onComplete:showResponse,
           //是否异步
          asynchronous:true
      }
      );
      }
      function showResponse(xmlrequest){
        //回调函数
       var text = xmlrequest.responseText;
        //将匹配的内容输出到 span 层
       document.getElementById("projectspan").innerHTML=text;
        // $("projectspan").innerHTML=xmlrequest.responseText;
       }
</head>
< body >
Project manager:
     < span id ="projectspan" class ="font_bluet" > <select
    name="project.resource_id" id="prijectmanager">
      < option value ="-1" > Choose </option>
      < option value ="0" >aaaa </option>
      < option value ="1" >bbbb </option>
      < option value ="2" >cccc </option>
      < option value ="3" >dddd </option>
     </select> </span>
     < input name ="text" type ="text" id ="itext" onKeyUp ="getXML()" />
</body>
</html>

在XWORK.XML中加入下面的代码：

< action name ="searchAction" method ="searchAction" class ="com.mdcl.timecard.action.ProjectAction" >
</ action >

在action中：

public void searchAction() {

HttpServletResponse   response=ServletActionContext.getResponse();

response.setContentType( "text/html;charset=utf-8");

PrintWriter out;

String inputtext = ServletActionContext.getRequest().getParameter("inputtext");

   //根据输入框的内容到数据库查询符合条件项，返回
  // List （ resourcelist1）
   //如果没有符合条件项，则查询所有列表，返回 List （ resourcelist）
   if(!resourcelist1.isEmpty() || resourcelist1.size()>0){
   try {
      out = ServletActionContext.getResponse().getWriter();
      out.println( "<select name='project.resource_id' id='prijectmanager' class='fram'>");
       for( int i=0;i<resourcelist1.size();i++){
    out.println( "<option value=" + resourcelist1.get(i).getResourceId() + ">"
      + resourcelist1.get(i).getName() + "</option>");

      }
      out.println( "</select>");
       //输出缓存字符串

         out.flush();
         out.close();

  } catch (IOException e) {
       // TODO Auto-generated catch block
      e.printStackTrace();
  }
  } else{
       try {
    out = ServletActionContext.getResponse().getWriter();
    out.println( "<select name='project.resource_id' id='prijectmanager' class='fram'>");
     for( int i=0;i<resourcelist.size();i++){
        out.println( "<option value=" + resourcelist.get(i).getResourceId() + ">"
          + resourcelist.get(i).getName() + "</option>");

    }
    out.println( "</select>No Information!");
     //输出缓存字符串

          out.flush();
          out.close();

      } catch (IOException e) {
     // TODO Auto-generated catch block
    e.printStackTrace();
      }
  }
}