SSH下用ajax实现一个功能-求教

用ajax请求后将返回的信息显示在页面上具体的操作就是用js创建个标签把内容放进去后在页面创建此标签，在查询在创建当然是在前一个标签之后创建也可在前一个标签之前插入此标签非常好实现

//检查注册用户名
function checkUserName(){

var url='ajax/userRigster';
var param={username:$("#username").val()};
jQuery.post(url,param,
function (data) {
if(data=="<img src='../icons/false.jpg'/>用戶名已經存在"){
$("#username").focus();
$("#username").select();
}
$("#usernameimg").html(data);
});才用JQuery写的判断用户是否存在

其实要实现这个也不难，jquery访问后台，查到数据，然后在前台显示。jquery刷新，其实就是动态拼dom。你的业务有一个就是要求查询出的结果不能覆盖，而且累加（你没有考虑记录重复的问题，暂且不管），那么，这个就很好写。
设计一个单例，map类型的，
在controller中每次查询出数据后，都将数据塞入map中。
然后在画面循环显示即可。你参考一下我的jquery例子。http://blog.csdn.net/iisgirl/article/details/7355815
你只看jsp中个别方法即可。因为后台会有所差异，根据你用不同的技术，我的是spring mvc，你用其他的，就要考虑，从dao查出数据后，在controller中在像view层（jsp）发送之前，需要转换为json格式的，保证在jsp可以被顺利解析。

这个对jsp上的静态table也有要求把?还有如何把list 转换成json呢？

list转json，有专门的工具包可用，当然，如果你不嫌弃麻烦，可以自己拼接。

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>json 返回列表处理</title>
<script language="javascript">
var xmlHttp = false;
try{
xmlHttp = new ActiveXObject("msxml2.XMLHTTP");
}catch(e1){
try{
xmlHttp = new ActiveXObject("microsoft.XMLHTTP");
}catch(e2){
try{
xmlHttp = new XMLHttpRequest();
}catch(e3){
xmlHttp = false;
}
}
}
if(!xmlHttp){
alert("create xmlHttpRequest fail");
}
function jsonListResult(){
var result ="";
var r=document.getElementById("roleId").value;
xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4) {
var userList = eval('(' + xmlHttp.responseText + ')');
var user = eval(userList.JSONRESULT);
result = "<table border=0>";
result += "<tr><td>userId</td><td>userName</td><td>sex</td></tr>";
for(var i=0;i<user.length;i++) {
result += "<tr>";
result += "<td>"+user[i].userId +"</td>";
result += "<td>"+user[i].userName+"</td>";
result += "<td>"+user[i].sex+"</td>";
result += "</tr>";
}
result += "</table>";
                    document.getElementById('jsonDiv').innerHTML = result;
                }
}
xmlHttp.open("POST","Checkout.action",true);
xmlHttp.send(null);
}
</script>
  </head>
  <body>
   <div id="jsonDiv"></div>
   <input type=text name=roleId id=roleId />
    <input type="button" value="show" onclick="jsonListResult();">
  </body>
</html>为什么jsp页面这样写只能执行查询一次？还没累加。就打算查一次换一条结果每次都只能查一次再查就得刷新一下网页重新来过  后台貌似没问题有显示数据只是页面上不能显示。求解

搞错页面了是这段<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>json 返回列表处理</title>
<script language="javascript">
var xmlHttp = false;
try{
xmlHttp = new ActiveXObject("msxml2.XMLHTTP");
}catch(e1){
try{
xmlHttp = new ActiveXObject("microsoft.XMLHTTP");
}catch(e2){
try{
xmlHttp = new XMLHttpRequest();
}catch(e3){
xmlHttp = false;
}
}
}
if(!xmlHttp){
alert("create xmlHttpRequest fail");
}
function jsonListResult(){
//document.getElementById('jsonDiv').innerHTML="";
var r=document.getElementById("roleId").value;
    xmlHttp.onreadystatechange = function(){
var result="";
    if(xmlHttp.readyState == 4) {

var userList = eval('(' + xmlHttp.responseText + ')');
var user = eval(userList.JSONRESULT);
if(user!=""){
result = "<table border=0>";
result += "<tr><td>角色id</td><td>角色名</td><td>所有权限</td></tr>";
for(var i=0;i<user.length;i++) {
result += "<tr>";
result += "<td>"+user[i].roleId +"</td>";
result += "<td>"+user[i].roleName+"</td>";
result += "<td>"+user[i].roleRight+"</td>";
result += "</tr>";
}
result += "</table>";
}else{
alert("没有内容");
}
                    document.getElementById('jsonDiv').innerHTML = result;
                }
}
xmlHttp.open("POST","jsonlist.action?roleId="+r,true);
xmlHttp.send(null);
}
</script>
  </head>
  <body>
   <div id="jsonDiv"></div>
   <input type=text name=roleId id=roleId />
    <input type="button" value="show" onclick="jsonListResult();">
  </body>
</html>

说一下我的思路：1.前端关键字传到后台，2. 后台数据库查询 3.把结果返回前端（前端处理时需要自定义标签定义buffer比较常用，然后用jquery的append方法即可）不过这里有个疑问如果本次查询的关键字与上一次不同上一个关键字查出的结果不请空吗？应该是要清空的吧？其实可以把这些要显示结果的内容放在div中

直接上代码：
   var wordInput = $("#words");
                 var wordInputOffset = $(wordInput).offset();
                 //隐藏自动补全框并通过CSS设置补全框的位置大小及样式
                 $("#auto").hide()
                 .css("border","1px #00CCFF solid")
                 .css("position","absolute")
                 .css("background-color","white")
                 .css("top",wordInputOffset.top+wordInput.height()+ 4 +"px")
                 .css("left",wordInputOffset.left).width(wordInput.width()-0.5); //此处可根据自己的网页布局以及页面元素大小调整。

                 wordInput.bind("keyup",function(event){
                     //处理文本框中的键盘事件
                     var myEvent = event||window.event;
                     var keyCode = myEvent.keyCode;
                     //如果输入的是字母，退格，delete，空格或者数字键，应该将文本框中的最新信息发送给服务器,其中，空格键和数字键的加入使得输入中文也能支持~~
                     if((keyCode >= 65 && keyCode<=90)||(keyCode >= 48 && keyCode <= 57) ||(keyCode>=96 && keyCode<=105) || keyCode == 46 || keyCode == 8 || keyCode == 32)
                     {
                       //获取文本框的内容
                         var wordText = $("#words").val();
                         var autoNode = $("#auto");
                         if(wordText!=""){
                         // UPDATE：之前在这加上了退格与delete的keyCode的判断，实际上是没有必要的。
                         //将文本框中的内容发送到服务器端
                         //对上次未完成的延时操作进行取消
                         clearTimeout(timeoutId);
                         //对于服务器端进行交互延迟500ms，避免快速打字造成的频繁请求
                         timeoutId = setTimeout(function(){
                           $.post("searWordsList.action?rnd="+Math.random(),{mainWord:wordText},function(data){
                                  //将dom对象data转换成JQuery的对象
                                  var jqueryObj = $(data);
                                 //先找到所有的word节点
                                  var wordNodes = jqueryObj.find("word");
                                  //遍历所有的word节点，取出单词内容将单词内容添加到弹出框中
                                  autoNode.html(" ");
                                  wordNodes.each(function(i){
                                     //获取单词内容
                                      var wordNode = $(this);
                                     //新建div节点将单词内容加入到新建的节点中,将新建的节点加入到弹出框的节点中
                                      var newDivNode = $("<div>").attr("id",i);
                                      newDivNode.html(wordNode.text()).appendTo(autoNode);

                                      //增加鼠标进入事件，高亮节点;
                                      newDivNode.mouseover(function(){
                                          if(highlightindex != -1){
                                              $("#auto").children("div").eq(highlightindex).css("background-color","white");
                                          }
                                          highlightindex = $(this).attr("id");
                                          $(this).css("background-color","#ebebeb");
                                      });
                                      //增加鼠标移出事件，取消当前高亮节点
                                      newDivNode.mouseout(function(){
                                          $(this).css("background-color","white");
                                      });
                                     //增加鼠标点击事件，可以进行补全
                                      newDivNode.click(function(){
                                          var comText = $(this).text();
                                          $("#auto").hide();
                                          highlightindex=-1;
                                          $("#words").val(comText);
                                      });
                      });
                                  //如果服务器端有数据返回，则显示弹出框
                                  if(wordNodes.length>0){
                                      autoNode.show();
                                  }else {
                                  autoNode.hide();
                                  highlightindex=-1;
                                  }
                              },"xml");
                              },500);
                              }else{
                                  autoNode.hide();
                                  highlightindex=-1;
                                  }
                          } else if(keyCode == 38 || keyCode==40){
                              //如果输入的是向上38向下40按键
                              if(keyCode == 38){
                                  //up
                                  var autoNodes = $("#auto").children("div");
                                  if(highlightindex !=-1)
                                  {
                                      autoNodes.eq(highlightindex).css("background-color","white");
                                      highlightindex--;
                                  }else{
                                      highlightindex = autoNodes.length -1;
                                  }

                                  if(highlightindex == -1){
                                      //如果修改索引值以后index变成-1，则将索引中指向最后一个元素
                                      highlightindex = autoNodes.length -1;
                                  }
                                 //让现在被高亮的内容变成黄色
                                  autoNodes.eq(highlightindex).css("background-color","#ebebeb");
                              }
                              if(keyCode == 40){
                                  //down
                                  var autoNodes = $("#auto").children("div");
                                  if(highlightindex !=-1)
                                  {
                                      autoNodes.eq(highlightindex).css("background-color","white");
                                  }
                                  highlightindex++;
                                  if(highlightindex>autoNodes.length){
                                     //如果修改索引值以后index变成-1，则将索引中指向最后一个元素
                                      highlightindex = 0;
                                  }
                                 //让现在被高亮的内容变成黄色
                                  autoNodes.eq(highlightindex).css("background-color","#ebebeb");
                              }

                          }else if(keyCode == 13){
                             //如果按下的是回车

                              //下拉框有高亮的内容
                              if(highlightindex !=-1)
                              {
                                  var comText = $("#auto").hide().children("div").eq(highlightindex).text();
                                  highlightindex=-1;
                                  $("#words").val(comText); //将文本框内容改成选中项                                   //$("form:first").submit(); //提交form。若没有这句话，按下回车后，仅仅只改变了文本框里的内容，但是由于form本身就监控了回车按键默认为submit，提交的是文本框改变之前的内容，解决这个问题最简单的方式就是在文本框内容改变以后强制提交form的内容，此时，提交的内容就是选中项。                               }
                             //下拉框没有高亮的内容
                              else{

                                  $("#auto").hide();
                                 //让文本框失去焦点
                                  $("#words").get(0).blur();
                              }
                          }

                      });
关键词：<input name="words" id="words"  type="text" style="width: 300px;" class="input"/>
<div id="auto">

</div>

效果和百度，google搜索提示下拉框！将近类似！

调试易

SSH下用ajax实现一个功能-求教

解决方案 »