温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Ajax动态添加Table

发布时间:2020-07-17 23:25:16 来源:网络 阅读:766 作者:七羽燕 栏目:web开发

Ajax是一步的javaScript,是基于javascript实现的功能,会有更好的用户体验,比如无业面刷新技术根据查询的结果集动态的构造网页元素。

1.原生的Ajax

Ajax技术最核心的Javascript对象是XMLHttpRequest,它提供了对Http请求的能力,并且它可以在无刷新的情况下去请求并接收资源,
目前几乎所有浏览器都支持这个对象。
在请求某个url之前,需要绑定请求处理后触发的事件:
var xmlhttpRequest=new XMLHttpRequest();
xmlhttpRequest.onreadystatechange=function(){
           if (xmlhttpRequest.readyState==4 && xmlhttpRequest.status==200){
             document.getElementById("content").value=xmlhttpRequest.responseText;
           }
 }
其中readyState=4表示Http响应已经完全接收,status是状态码,200表示成功,
当两个条件都满足时,就可以接收服务器返回的数据。
当然,没有使用XMLHttpRequest()去请求是不会触发这个函数的,请求的代码是:
xmlhttpRequest.open("GET","<%=path%>/txt/ajaxtest.txt",true);
xmlhttpRequest.send();

括号中:GET表示get的请求方式,后面表示的是一个文本文档的路径(在我的ajax的第一篇博文中已经讲过了)。

这里是直接请求的文本文档,假如请求服务器上的某个action,那么action中应该使用response对象
给客户端写数据:
Writer writer=response.getWriter();
writer.write("iserror");
writer.flush();
writer.close();

2.动态增加Table

首先需要建立一个web工程,然后导入需要的工具包:fastjson-1.1.23.jar

建立一个servlet取名为:AjaxTable,我们下面会用GET请求,所以在get方法中邪如下代码:

        response.setContentType("text/html;charset=utf-8");
List<User> userlist=new ArrayList<User>();
for(int i=0;i<10;i++){
    User user=new User();
    user.setUsername("小明");
    user.setPassword(i%2+"");
    userlist.add(user);
}
String json=JSON.toJSONString(userlist);
PrintWriter pw=response.getWriter();
pw.println(json);
pw.flush();
pw.close();

代码最上面一行为了防止有乱码。

这一句:String json=JSON.toJSONString(userlist);的JSON对象时我们上面导入的工具包中的内容。

建立一个jsp取名为:AjaxTable.jsp,在使用之前我们需要导入javascript的一个包,包名是:jquery-1.7.1.js

完整代码如下:

<html>
  <head>
    <title>动态增加Table</title>
  <script type="text/javascript" src="<%=path%>/js/jquery-1.7.1.js"></script>
  <script type="text/javascript">
  function createTable(){
         $.ajax({
            url:"<%=path%>/servlet/JsonTableAjax",
            dataType:"json",
            type:"get",
            success:function(results){
 var tableStr="<table border='1'><tr><td>姓名</td><td>年龄</td></tr>";
              for(var i=0;i<results.length;i++){
                var p=results[i];
tableStr=tableStr+"<tr><td>"+p.username+"</td><td>"+p.password+"</td></tr>";
              }
              tableStr=tableStr+"</table>";
              $("#tableid").html(tableStr);       
            }   
         });    
      }
  </script>
  </head>
                                  
  <body>
    <input type="button" value="创建table"     <div id="tableid"></div>
  </body>
</html>

url表示跳转的servlet的路径,在web.xml里面找;dataType是数据类型,servlet使用json去接收的;type是请求方式,用的是get。

$("#tableid").html(tableStr);是使用的javascript的框架Jquery的元素选择器。

最后在input里加一个onclick事件。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI