Ajax入门

最新推荐文章于 2024-07-10 10:04:46 发布

小虎牙丶

最新推荐文章于 2024-07-10 10:04:46 发布

阅读量1.1k

点赞数

文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/m0_58260634/article/details/123427359

版权

本文介绍了Ajax的基础知识，包括其定义和用途，如不刷新页面更新内容、异步数据交换等。通过两个实际案例，展示了如何使用Ajax进行登录检测和异步信息插入，详细解释了Ajax的调用格式和参数。最后，总结了使用Ajax的关键步骤，强调了后端返回JSON数据和前端事件绑定的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例一：登录检测（异步刷新：提示你的信息输入的是否正确）

一、什么是Ajax？

“AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 ajax不是新的编程语言,而是一种使用现有标准的新方法。通俗的说就是浏览器在不刷新整个网页的情况下，部分更新。

AJAX 能够干什么：

不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

二、Ajax用法：

1.使用Ajax先要导入jquery的包。

提供一下网络版的Jquery地址（联网才能使用）

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

jQuery Ajax本质就是 XMLHttpRest,对他进行了封装，方便调用！我们来看看他的方法（使用格式）：

普遍使用的三个是：Ajax,Get,Post.

Ajax格式：

$.ajax({
    url:"",            //带载入页面的url地址
    dataType:"json",   //返回格式为json
    async:true,        //请求是否异步，默认为异步，这也是ajax重要特性
    data:{             // 待发送Key/value的参数，也就是异步刷新的值
    "id":"value"},     //参数值
    type:"GET",        //请求方式，如果是Post，在这里更改
    beforeSend:function(){
                       //请求前的处理
    },
    success:function(req){
                      //请求成功时处理
    },
    complete:function(){
                      //请求完成的处理
    },
    error:function(){
                      //请求出错处理
    }
});

通常使用这几个参数：

$.ajax({
    url:"",            
    data:{"id":"value"},     
    success:function(req)
    {                  
    }
});

案例一：登录检测（异步刷新：提示你的信息输入的是否正确）

后端代码：

@Controller
@ResponseBody
@RequestMapping("/ajax")
public class AjaxDemo {
    @RequestMapping(value = "/all",produces ="application/json;charset=utf-8" )
    public void AjaxDemo1(String name, HttpServletResponse response) throws IOException {
        if("admin".equals(name))
        {
            response.getWriter().print("true");
        }else{
            response.getWriter().print("false");
        }
    }

前端代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
<%--    第一步导入Jquery.--%>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
function a() {
    $.ajax({
        type:"GET",
        //发送请求的url地址
       url:"${pageContext.request.contextPath}/ajax/all",
        //获得本输入的值
        data:{"name":$('#username').val()},
        //请求成功后执行的方法
        success:function (data) {   //这个data值很重要，里面封装了服务器返回的数据  ，还有status：状态
        console.log(data);
        $("#error").html(data)
        }
    });
}
</script>

用户名:<input type="text" id="username" onblur="a()"/><span id="error"></span> <br>
密码:<input type="password" id="password" value="">

</body>
</html>

案例二：异步插入信息案例

后端代码：

1.先创建User实体类

package mzn.com.pojo;

public class User {
    private Integer id;
    private String name;
    private int age;

    public User() {
    }

    public User(Integer id, String name, int age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", age=" + age +
                '}';
    }
}

2.控制层代码：

@Controller
@ResponseBody
@RequestMapping("/ajax")
public class AjaxDemo {
    @RequestMapping("/a1")
    public List<User> GetName()
    {
        ArrayList<User> list = new ArrayList<>();
        list.add(new User(1,"钟离",19));
        list.add(new User(2,"胡桃",12));
        list.add(new User(3,"甘雨",20));
        return list;
    }
}

前端代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>User</title>
<%--    这里导入的是bootstrap,用于页面的布局 下面是地址--%>
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
          crossorigin="anonymous">
<%--    这里导入jQuery--%>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $(function () {
        //选择器 选用按钮给按钮添加点击事件
        $("#btn").click(function () {
            //点击事件中使用ajax完成页面的异步刷新
            $.ajax({
                type:"GET",
                url:"${pageContext.request.contextPath}/ajax/a1",
                success:function (data) {
                    console.log(data);
                    var str="";
                    for(var i=0;i<data.length;i++)
                    {
                        str+="<tr>"+
                            "<td>"+data[i].id+"</td>"+
                            "<td>"+data[i].name+"</td>"+
                            "<td>"+data[i].age+"</td>"+
                            "<tr/>"
                    }
                    $("#body").html(str)
                }
            })
        })
    });

</script>
<div class="container">
<input class="btn btn-default" type="button" value="获取数据" id="btn">
<table class="table">
    <caption><h1>人物信息</h1></caption>
    <thead>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    </thead>
    <tbody id="body">

    </tbody>
</table>
</div>
</body>
</html>