Question

我有一个动态的Web应用程序。我的程序是用户输入一个搜索词，作为回应，将获得包含每个词的复选框的文档列表，以便用户检查该文档是否相关。

我的问题是我如何将清单值发送到我的servlet，在第一次响应之后我的servlet将如何被调用。我虽然创建了另一个将获得清单值的servlet，但我不知道我将如何称呼它。

这是我的servlet代码

  String query= req.getParameter("query") ;

          PrintWriter out = resp.getWriter();

          if(result.isEmpty())
          {out.println("<p> No search result found</p>"); }
          else
          {
          out.println("<table style="+"width:100%"+">");
          out.println("<tr> <td> <p> "+result.size() +"  documents found </p></td>");
          out.println("<td> Relevant </td></tr>");
        for(String word : result.keySet())
              {String regex = "\\b.html\\b";
              String content = word.replaceAll(regex, "");
              out.println("<tr> <td>");
              out.println("<p>");
              out.println(" <a href="+target_dir+"/"+word+">"+content+"</a>");
              out.println("</p>");
              out.println("</td> <td>");
             out.println(" <input type="+"checkbox name="+word+">");
              out.println("</td></tr>");
              }

         out.println( "</table>");}
         // out.println(query);
         out.close();

这是我的一些HTML代码：

<html>
<head>
 <script>
       function sendValues(param){
             xmlHttp = new XMLHttpRequest();
             xmlHttp.onreadystatechange=callback;
             var  url="servlet"+"?query="+
                document.getElementById("search").value ;
             xmlHttp.open("GET",url,true);
             xmlHttp.send();
         }
         function callback() {
             if(xmlHttp.readyState==4 && xmlHttp.status==200) {
                 var value = xmlHttp.responseText;
                 document.getElementById("searchresult").innerHTML = value;
                }
                }
    </script>


</head>
<div id="resultArea"></div>

<body>

<div class="form-wrapper">
    <input type="text" id="search" name="query"  placeholder="Search for..." required>
    <input type="button" value="search"  id="submit" onclick="sendValues()"/>&nbsp;
</div>
<div class="panel" id="searchresult"> </div>    
</body>
</html>

sample of my output :

Answer 1

您可以在结果下面使用一个按钮来调用提交复选框数据的函数

var value = xmlHttp.responseText;
value += '<button type="button" class="relevence">Set Relevant</button>';
document.getElementById("searchresult").innerHTML = value;

为点击

附加事件监听器

document.querySelector('#searchresult').addEventListener('click', function(e){
    if (e.target.className == 'relevence'){
        var arguments = '';
        var checked = document.querySelectorAll('#searchresult :checked');
        var len = checked.length
        if (len == 0) return;
        for (var i = 0; i < len; i++){
            arguments += checked.getAttribute('name') + '=on&'
        }
        xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange=callback;
        var  url="otherservlet?"+arguments;
        xmlHttp.open("GET",url,true);
        xmlHttp.send();
        function callback() {
            if(xmlHttp.readyState==4 && xmlHttp.status==200) {
                console.log(xmlHttp.responseText);
            }
        }
    }
});

只需遍历get参数即可获取已检查的单词。

===============================================

您忘记了?开始查询字符串

var  url="servlet"+"?query="+
     encodeURIComponent(document.getElementById("search").value) ;

响应不起作用后jsp调用servlet

1 个答案: