一篇文章带你掌握--AJAX技术

最新推荐文章于 2024-06-13 20:12:40 发布

ShawnWang04

最新推荐文章于 2024-06-13 20:12:40 发布

阅读量204

点赞数

分类专栏： Java 文章标签： ajax java js jquery

本文链接：https://blog.csdn.net/Wang________/article/details/105316004

版权

Java 专栏收录该内容

72 篇文章 0 订阅

订阅专栏

AJAX：

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）

作用十分强大，不但可以实现页面上的异步请求，同时还可以防止请求过来，可以将响应延缓减小服务器压力

一、原生AJAX

GET请求

 <script type="text/javascript">
       function btnClick() {
           var xhr;

           //1.创建XMLHttpRequest对象
           if (window.XMLHttpRequest){
               xhr = new XMLHttpRequest();
           }else {
               xhr = new ActiveXObject("Microsoft.XMLHTTP");
           }

           //2.回调函数 xhr.readyState只有为4时表示返回成功 status==200为成功
           xhr.onreadystatechange = function () {
               if (xhr.readyState==4 && xhr.status==200) {
                   alert(xhr.responseText);
                   document.getElementById("abc").innerHTML = xhr.responseText;
               }
           }
           //3.调用open方法 设置参数  true表示开启了异步(默认为true)
           xhr.open("GET","test?id=5",true);
           //4.将页面返回
           xhr.send();
        }
 </script>

POST请求

<script type="text/javascript">
      function btnClick() {
            var xhr;
            //1.创建XMLHttpRequest对象
            if (window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xhr.onreadystatechange=function () {
                if (xhr.readyState==4 && xhr.status==200){
                    document.getElementById("abc").innerHTML=xhr.responseText
                }
            }

            xhr.open("POST","test",true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send("id=6");
        }
</script>

JQuery使用AJAX(重点推荐使用)

详见 https://www.runoob.com/jquery/ajax-ajax.html

注意需要导入 JQuery的地址

方式一、导入链接地址

方式二、下载JQuery的包进行导入

<script type="text/javascript">
  $(function () {
            // var btn = $("#btn");
            var text = $("#text");
            text.blur(function () {
                alert("失去焦点");
                //调用JQuery的ajax方法
                $.ajax({
                    //请求路径
                    url: 'test',
                    //请求方式
                    type: 'post',
                    //携带参数
                    data: 'id=2',
                    //返回类型，从controller层响应到页面内容的类型 text、json等
                    dataType: 'text',
                    //成功后回调方法
                    success: function (data) {
                        text.after(data)
                    }
                });
            })
        })
</script>

$.ajax({属性}) 常⽤的属性参数：

url：请求的后端服务地址

type：请求⽅式，默认 get

data：请求参数

dataType：服务器返回的数据类型，text/json

success：请求成功的回调函数

error：请求失败的回调函数

complete：请求完成的回调函数（⽆论成功或者失败，都会调⽤）

页面内容

<body>
<span id="abc"></span><br>
    <input id="text" id="text" type="text"><br>
    <input type="button" id="btn" onclick="btnClick()" value="提交">
</body>

循环列表时点击将数据进行回显同时获取id值将id与button绑定

<table id="add-row" class="display table table-striped table-hover">
	<thead>
		<tr>
			<td>学生编号</td>
			<td>学生照片</td>
			<td>学生姓名</td>
			<td>出生日期</td>
			<td>班级</td>
			<td>籍贯</td>
			<td>导员</td>
			<td>所在校区</td>
			<th style="width: 10%">操作</th>
		</tr>
	</thead>
	<tbody>
	<!--借助于循环，jsp技术中jstl标签库中的循环,加入el表达式中的获取 -->
	<c:forEach items="${requestScope.listStudent}" var="student">
		<tr>
			<td>&nbsp;${student.sid}</td>
			<td>&nbsp;<img width="140px" height="90px" src="/upload/${student.img}"/></td>
			<td>&nbsp;${student.sname}</td>
			<td>&nbsp;${student.birthday}</td>
			<td>&nbsp;${student.stu_class}</td>
			<td>&nbsp;${student.address}</td>
			<td>&nbsp;${student.teacher}</td>
			<td>&nbsp;${student.campus}</td>
			<td>
			<button class="btn btn-primary btn-round ml-auto updateRowModal" data-toggle="modal" data-target="#addRowModal" sid="${student.sid}">修改学生</button>
			</td>
		</tr>
	</c:forEach>
	</tbody>
</table>

通过ajax向后端传值

<script type="text/javascript">
    $(function () {
        var btn = $(".updateRowModal");
        btn.click(function () {
            //获取自定义属性的值
            var sid = $(this).attr("sid");
            $.ajax({
                //请求路径
                url: 'teacherUpdateStudent',
                //请求方式
                type: 'GET',
                //携带参数
                data: {sid: sid},
                //返回类型，从controller层响应到页面内容的类型 text、json等
                dataType: 'json',
                //回调方法
                complete: function (data) {
                    //通过eval方法进行解析json
                    var jsonData = eval('(' + data.responseText + ')');
                    //将 <input type="hidden" name="sid" id="sid"> 属性进行赋值
                    $("#sname").val(jsonData.sname);
                    $("#sid").val(jsonData.sid);
                    $("#birthday").val(jsonData.birthday);
                    $("#img").val(jsonData.img);
                    $("#address").val(jsonData.address);
                    $("#campus").val(jsonData.campus);
                    console.log(data);
                }
            });
        })
    })
</script>

ShawnWang04

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一篇文章带你掌握--AJAX技术

AJAX： Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML）作用十分强大，不但可以实现页面上的异步请求，同时还可以防止请求过来，可以将响应延缓减小服务器压力一、原生AJAXGET请求 <script type="text/javascript">...
复制链接

扫一扫

专栏目录