使用原生Ajax的步骤

html界面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax测试</title>
</head>
<body>
<table>
    <thead>
    <tr>id</tr>
    <tr>name</tr>
    <tr>tag</tr>
    </thead>
    <tbody id="tList">

    </tbody>
</table>
<button onclick="getlist()">获取</button>

<script src="js/jquery-3.4.1.js"></script>
<script>
    function getlist() {
        var xhr = null;
        //判断当前浏览器是否支持XMLHttpRequest对象,如果支持则创建
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();

        } else {
            //老版本的ie浏览器使用ActiveX对象
            xhr = new ActiveXObject("Microsoft.XMlHTTP");
        }
        //设置回调函数
        xhr.onreadystatechange = function () {
            //xhr.readyState返回一个XMLRequest代理当前所处的状态,readyState 4 表示当前界面加载完成,status 200 代表是一个成功的请求
            if (xhr.readyState == 4 && xhr.status == 200) {
                //获取响应文本并解析转换为JavaScript 对象
                var arr = JSON.parse(xhr.responseText);
                //遍历数组并添加到表格中
                $.each(arr, function (i, n) {
                    $('#tList').append("<tr> <td>" + n.id + "<td>" + n.name + "</td>" + "<td>" + n.tag + "</td>" + "</tr>")

                })
            }
        }
        //设置open 请求方式为post, url为/do , true为异步请求方式,false为同步方式
        xhr.open("post", "/do", true);
        //发送请求
        xhr.send();
    }


</script>
</body>
</html>

Servlet

后台就是把一个对象集合转换为jsonString传给前端

@WebServlet("/do")
public class ServletDemo extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        Teacher teacher = new Teacher(1, "熊根滔", "zz");
        Teacher teacher1 = new Teacher(2, "熊根滔", "z");
        Teacher teacher2 = new Teacher(3, "熊根滔", "zz");
        Teacher teacher3 = new Teacher(4, "熊根滔", "saf");
        Teacher teacher4 = new Teacher(5, "熊根滔", "asf");
        Teacher teacher5 = new Teacher(6, "熊根滔", "sfh");
        Teacher teacher6 = new Teacher(7, "熊根滔", "sdg");
        List<Teacher> teachers = new ArrayList<>();
        teachers.add(teacher);
        teachers.add(teacher1);
        teachers.add(teacher2);
        teachers.add(teacher3);
        teachers.add(teacher5);
        teachers.add(teacher4);
        teachers.add(teacher6);

        //将集合转换为json字符串
        String zz = JSON.toJSONString(teachers);
        //传给前端
        resp.getWriter().println(zz);



    }
}
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在Vue2中使用原生的Ajax主要有以下几个步骤: 1. 引入XMLHttpRequest对象:在Vue组件中,可以通过`new XMLHttpRequest()`来创建一个XMLHttpRequest对象,该对象是用于发送Ajax请求的基础。 2. 发送Ajax请求:使用创建的XMLHttpRequest对象,通过调用其`open()`和`send()`方法来发送Ajax请求。`open()`方法用于指定请求的类型(GET或POST)和URL,`send()`方法用于发送请求。 3. 监听并处理响应:通过`onreadystatechange`事件来监听Ajax请求的状态和响应。当`XMLHttpRequest`对象的`readyState`属性发生改变时,会触发该事件。在事件处理函数中,可以使用`status`属性来获取响应的状态码,`responseText`属性来获取响应的内容。 4. 解析和使用响应数据:根据需要,可以使用内置的JSON对象来解析JSON格式的响应数据,或者直接使用响应的内容。 下面是一个使用原生Ajax发送GET请求的示例: ``` <template> <div> <button @click="getData">发送请求</button> <div v-if="responseData">{{responseData}}</div> </div> </template> <script> export default { data() { return { responseData: null } }, methods: { getData() { const xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data', true); xhr.send(); xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { this.responseData = xhr.responseText; } } } } } </script> ``` 在上述示例中,当点击按钮时,会发送一个GET请求到`/api/data`接口,并将响应的内容显示在页面上。 需要注意的是,使用原生Ajax需要手动处理一些错误和异步请求的情况,而Vue2提供了更方便的Axios等第三方库来简化Ajax请求的操作,推荐使用这些库来处理Ajax请求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值