jQuery Ajax前后端数据交互
  mJ3y71vHJ0RC 2023年12月07日 33 0


jQuery Ajax前后端数据交互_jquery

ajax是用来做前后端交互的,前端使用ajax去去发送一个请求,后端给其响应拿到数据,前端做些展示。 


浏览器访问网站一个页面时, Web 服务器处理完后会以消息体方式返回浏览器,浏览器自动解析


HTML 内容。如果局部有新数据需要更新,需要刷新浏览器重新发起页面请求获取最新数据,如果


每次都是通过刷新解决这个问题,势必会给服务器造成负载加重,页面加载缓慢。



Ajax(Asynchronous JavaScript And XML ,异步 JavaScript 和 XML) , AJAX 是一种在无需重新加载 整个网页的情况下,能够更新部分网页的技术。例如在不刷新页面的情况下查询数据、登录验证等(数据在没有变化的情况下走的是缓存)




无刷新的好处 :



减少带宽、服务器负载



提高用户体验


 

 


基本使用


jQuery Ajax主要使用$.ajax()方法实现,用于向服务端发送HTTP请求。


语法: $.ajax([settings]);, settings 是 $.ajax ( ) 方法的参数列表,用于配置 Ajax 请求的键值对集合,参数如下 :


jQuery Ajax前后端数据交互_jquery_02

 在往后端发送一个请求,在发送请求之后,正常拿到数据会渲染到用户列表的ul里面去。如果请求发生了异常,那么就去报一个提示。

在前端去对接开发的时候,它肯定要知道对接的后端接口返回的是什么数据,根据数据格式去做怎么样的数据处理。

下面是一个派生选择器,jquery也是可以使用派生选择器的。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<div id='demo'>
    <p id='notice' style="color: red;"></p>
    <h1>用户列表</h1>
    <ul></ul>
</div>

<script type="text/javascript">
$.ajax({
    type: "GET",
    url: "http://www.aliangedu.cn/test-table/user.json",
    success: function (result) { // result是API返回的JSON数据
    if(result.code == 200) {
        for (i in result.data) {
            $('#demo ul').append("<li>" + result.data[i]['username'] +
                "</li>"); // 将li标签追加到ul标签
            }
        } else {
            $('#notice').text('数据获取失败!')
        }
    },
    error: function() {
        $('#notice').text('连接服务器失败,请稍后再试!')
    }
})
</script>

</body>
</html>

回调函数



回调函数:参数引用一个函数,并将数据作为参数传递给该函数。 jqXHR:一个XMLHttpRequest对象




jQuery Ajax前后端数据交互_jquery_03


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月07日 0

暂无评论

推荐阅读
mJ3y71vHJ0RC