0

我不熟悉将 AJAX 和 JQuery 与 Java Servlet 一起使用。我想生成一个生成搜索结果列表的搜索页面（如谷歌页面列表）。我的数据库查询有效并返回 JSONObject 或 JSONArray。

我的代码不适用于 JQUERY。我尝试了很多不同的版本。基本错误是搜索后的新页面只是以数组打印的形式显示数据。它不识别 HTML。

我在下面显示了我的代码，其中删除了 db 查询。我尝试的不同版本使用各种形式的 JSON 语法，有和没有 GSON，但没有任何效果。

系统是Linux。

任何评论都将不胜感激，甚至是一个综合示例的链接。

搜索.js

$(document).ready(function(){
    $('#searchbutton').submit(function)
{
    var inputdata = searchText:$("#searchtext").val();
};
$.ajax({
    type:"POST",
    datatype: "json",
    url:"search",
    data:inputdata,
    success: function(data){
 $("#searchResults").append("<b>data.linkresult</b>")

        });
        });

});

});
 });

搜索.java

 protected void doGet(HttpServletRequest request, 
  HttpServletResponse response) throws ServletException, IOException 
{
 PrintWriter out = response.getWriter();    
// reading the user input
String searchword= request.getParameter("search");  
String Tmsg = "";
Map<String, Object> data = new HashMap<String, Object>();


data.put("searchresult", searchword);


response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(new Gson().toJson(data));

搜索.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Search for a word</title> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./js/search.js"></script>
<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
</head>
<body>
<form action="search">          
         Search<br>
         <div>Word -
            <input id="searchtext" type="text" name="search" size="40px">
        </div>

        <div>
            <input id="searchbutton" type="submit" value="Submit">
        </div>

    </form>      




 <div id="searchresults">

 </div>

结果（仅显示这一行）：

{"searchresult":"search example"}
4

1 回答 1

0

要解析从 servlet 接收到的 Json 消息，您可以通过执行以下操作来实现此目的。假设您已从 servlet 收到以下消息

{"key1":"val1","key2":"val2","key3":"val3"}

并且您希望它显示在表格中。

success: function(data){
var output = '<table>';
for ( var key in data) {
    if (data.hasOwnProperty(key)) {
        output += "<tr>";
        output += "<td>" + key + "</td>";
        output += "<td>" + data[key] + "</td>";
        output += "</tr>";
    }
}
output += "</table>";
$("#searchResults").empty();
$("#searchResults").append(output);

});
于 2013-07-05T12:41:22.880 回答