大二上每日总结

今日学习了Ajax的基本内容：

异步加载 将客户端和服务器的交互更新在局部页面显示，无需刷新整个页面。

Ajax是基于jQuery的要引入jQuery包，<script type="text/javascript" src="jQuery包地址"></script>

$.ajax({ url:'请求地址',type:‘post’,dateType:'请求返回的类型',date:'id=1（向请求传参）',success:function(date(请求返回的内容){....响应成功要执行的方法})

以下给出实例：

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  $(function(){
    var btn=$("#btn");
    btn.click(function(){
      $.ajax({
        url:'/11/test',
        type:'post',
        date:'id=1',
        dateType:'text',
        success:function(date){
          var text=$("#text");
          text.before("<span>"+date+"<span><br>");
        }
      })
    });
  });
</script>
  </head>
  <body>
    <input id="text" type="text">
    <input id="btn" type="button" value="提交"><br>
  </body>
</html>
public class servletclass extends HttpServlet{

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        super.doGet(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        String str="Hello Word!";
        resp.getWriter().write(str);
    }
  
}

这样通过jQuery的$.ajax就可以不用刷新页面而将"Hello word"输出来

 

posted @ 2020-11-18 22:45  风吹过半夏  阅读(124)  评论(0)    收藏  举报