ajax详细操作

ajax简单点讲就是异步的javascript和xml

最显著的特点就是

1.局部刷新

2.用户体验更好

异步加载，操作之间互不影响

同步加载，操作之间必须一步一步来

基于jqure的ajax，但如果想要去使用ajax的话，咱们还需要引用相应的js文件，但不需要导包操作

文件访问操作：

1.先访问到同级文件

2.后加/访问其子文件

看不懂的可以试着看看我的例子

8080就相当于在web那一层

将文件进行传递需要进行数据的转移，

        //输出helloword
        String str ="Hello Word!!";
        //req用str字符接收str数据
        req.setAttribute("str",str);
        //传数据到index.jsp里面
        req.getRequestDispatcher("index.jsp").forward(req, resp);

除此之外，JQ里面，可以进行以下操作

如果这样返回的话

返回的数据就是整个index的代码

      //输出helloword
        String str ="Hello Word!!";
        //req用str字符接收str数据
//        req.setAttribute("id",id);
//        req.setAttribute("str",str);
        //传数据到index.jsp里面
//        req.getRequestDispatcher("index.jsp").forward(req, resp);
//        通过getWriter方法输出到index

在这样短暂的学习后，咱们就可以基本完成互异操作

<%--
  Created by IntelliJ IDEA.
  User: mr.wang
  Date: 2021/10/31
  Time: 22:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript" src="js/jquery-3.5.1.min.js" ></script>
    <script type="text/javascript">
<%--在方法里面链接body里面的元素--%>
      $(function () {
        //用BT代表id为BT的地方
        var BT=$("#BT");
        //用BT绑定方法
        BT.click(function () {
          $.ajax({
              url:'/_war_exploded/test',
              type:'post',
              //咱们传过去的参数
              data:'i=1',
              //服务端返回的数据类型
              dataType:'text',
              success:function (data) {
                //连接文本框
                var text=$("#text");
                text.before("<span>"+data+"<span/>"+"<br/>");

              }
            });
        });
      })
    </script>
  </head>
  <body>
  <input type="text" id="text">
  <br/>
  <input type="button" value="提交数据" id="BT">
  </body>
</html>