jQuery Ajax前后端数据交互

富士康质检员张全蛋

已于 2024-09-02 19:33:57 修改

阅读量3.4k

点赞数 1

分类专栏： html css javascript jquery 文章标签： jquery ajax

于 2023-11-15 15:09:21 首次发布

本文链接：https://blog.csdn.net/qq_34556414/article/details/134414308

版权

html css javascript jquery 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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

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

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

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

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

无刷新的好处 :

减少带宽、服务器负载
提高用户体验

页面一小部分内容需要动态的更新，比如每几秒获取最新的动态数据去展示出来。那么这小部分的内容就可以在Ajax设计上，然后让他去调用后端的api，定期的拿数据，呈现在这里。用户只需要打开这个页面而不需要刷新，这个数据就会发生变化。

基本使用

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

语法： $.ajax([settings]);， settings 是 $.ajax ( ) 方法的参数列表，用于配置 Ajax 请求的键值对集合，参数如下 : 语法很简单，方法里面添加一些参数即可。

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

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

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

下面返回的主要是JSON用户示例。当然你可以使用go写个简单的api返回这个数据去测试一下。

从后端获取数据并且展示：

<!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数据
    console.log(result)
    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>

$("#btnGET").on("click", function () {
          $.ajax({
            type: "GET",
            url: "http://127.0.0.1/api/get",
            success: function (res) {
              console.log(res);
            },
          });
        });

当前访问页面的域名和调用接口的域名不一致引发的跨域。这个是需要在服务器端去配置的。

向服务端提交数据：提交通常都有提交按钮的，通过提交按钮绑定函数去触发的。绑定标签或者id，然后再去执行提交数据。

或者使用ajax每隔一段时间获取数据，写个定时任务也行，这里面可以填充ajax，将数据填充到上面即可。

    <p></p>

<script type="text/javascript">

    var getData = function(){
        console.log("定时任务获取数据")
        $("p").text(new Date())

    }

    setInterval("getData()",2000)