草庐IT

ajax - 初步介绍

Heymar-10 2023-03-28 原文

进入ajax了，想要进入vue还有一个前提就是要把ajax给熟悉一下，看一看客户端与服务器之间是怎么一个通信的过程，第一天主要是先了解了一下ajax的一些介绍，ajax嘛，在进入之前，肯定是要了解一下客户端与服务器之间的一个通信过程，其实不管是请求还是发送都遵循的一个原则，即请求、处理、响应，如何来请求服务器上的数据，需要用到XMLHttpRequest对象，也就是声明一个对象实例var xhrObj = new XMLHttpRequest（）。

我们通常所说的资源请求方式主要是分为两种，一种是get请求向服务器所求资源，一种是post向服务器发送资源。

继续看到什么事ajax？可以简单理解为用到了xhr，那他就是ajax，那么为什么要学习ajax？因为它可以轻松实现网页与服务器之间的数据交互，主要应用在如检测用户名是否被占用、加载搜索提示列表、根据页码刷新表格数据等。

我们这部分先以jQuery为例对ajax做一些操作，因为浏览器提供的xhr用法比较复杂，就先用jq来实现，jq里面主要是就是分为三种$.get() $.post() $.ajax() 这三种，其中前两种的用法是（url，【data】，【callback】），url使我们要请求的资源地址，data是我们的参数，callback是请求成功后的回调函数，他们两个可以带参请求也可以不带参请求，然后$.ajax()它是既可以实现get也可以实现post，

（｛type : ‘get or post’， url ：‘’， data ： ｛｝ ， success ：｝） type就是请求方式，url请求地址，data参数，success是执行成功的回调

下面就是一些jq分别利用ajax的get以及post请求的用法

1.

不带参数的请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<button>
    发起不带参数的请求
</button>
<body>
    <script src="./lib/jquery.js"></script>
    <script>
    $('button').on('click', () =>  $.get('http://www.liulongbin.top:3006/api/getbooks', res => console.log(res)))        
    </script>
</body>
</html>

2.

带参数的请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<button>
    发起带参数的请求
</button>
<body>
    <script src="./lib/jquery.js"></script>
    <script>
        $('button').click(() => {
            $.get('http://www.liulongbin.top:3006/api/getbooks',{id : 2},res => console.log(res))
        })
    </script>
</body>
</html>

3.

post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>提交</button>
    <script src="./lib/jquery.js"></script>
    <script>
        $('button').on('click',function() {
            $.post('http://www.liulongbin.top:3006/api/addbook', {bookname:'水浒传',author:'施耐庵',publisher:'上海图书出版社'},res => console.log(res))
        })
    </script>
</body>
</html>

4.

ajax的get post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>get</button>
    <script src="./lib/jquery.js"></script>
    <script>
        $('button').on('click', function() {
            $.ajax({
                type : 'get',
                url : 'http://www.liulongbin.top:3006/api/getbooks',
                data : {
                    bookname : '红楼梦'
                },
                success : res => console.log(res)
            })
        })

    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>post</button>
    <script src="./lib/jquery.js"></script>
    <script>
        $('button').on('click', function() {
            $.ajax({
                type : 'post',
                url : 'http://www.liulongbin.top:3006/api/addbook',
                data : {
                    bookname : '红楼梦',
                    author : '吴承恩',
                    publisher: '出清图书出版社'
                },
                success : res => console.log(res)
            })
        })

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

 

5.

然后是今天的综合案例，首先是一个图书管理的页面利用ajax也就是后面会说到的接口达到添加删除图书的作用，然后结构使用bootstrap实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <script src="./lib/jquery.js "></script>
</head>
<body style="padding: 15px;">
    <!-- 添加图书的面板 -->
    <!-- 1.primary表示蓝色的意思 先设置一个面板蓝色 -->
    <div class="panel panel-primary">
          <div class="panel-heading">
                <h3 class="panel-title">添加新图书</h3>
          </div>
          <!-- 2.1这里有个注意点 加了一个类名form-inline为form加可使里面的子元素为display inline block -->
          <div class="panel-body form-inline">
              <!-- 2.在面板body里面添加input表单 bs3-input-text这个 然后修改值-->
              <div class="input-group">
                  <div class="input-group-addon">书名</div>
                  <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
              </div>
              <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
            </div>
            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control" id="iptshiper" placeholder="请输入出版社">
            </div>
            <button id="btnAdd" class="btn btn-primary">添加</button>
          </div>
    </div>
    <!-- 图书的表格 -->
    
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>
    <script>
        // 1.获取图书列表
        function getData() {
            $.get('http://www.liulongbin.top:3006/api/getbooks',res => {
            if (res.status == 500) {
                return alert('获取数据失败')
            }else {
                // 1.1这里有个很厉害很厉害的点我搞了半天终于发现问题所在了，之前一直找不到 数据，就是这里循环的时候，他不是像原生js一样
                // 可以只写一个参数值，jq的好像是要把索引和参数都写上才行！！！
                let arr = []
                $.each(res.data, (i, item) => {
                    arr.push(`<tr>
                        <td>${item.id}</td>
                        <td>${item.bookname}</td>
                        <td>${item.author}</td>
                        <td>${item.publisher}</td>
                        <td><a href="javascript:;" data-id="${item.id}" >删除</a></td>
                        </tr>`)
                }) 
                $('tbody').empty().append(arr.join(''))
            }
        })
        }
        getData()
        // 1.2为每个删除按钮添加删除功能 首先还是要明确一个点，这里的a标签是后加的，所以才采用事件委托才行
        $('tbody').on('click', 'a', function () {
        var id = $(this).attr('data-id')
        $.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {
          if (res.status !== 200) return alert('删除图书失败！')
          getData()
        })
      })
    //   1.3 添加图书功能
    $('#btnAdd').on('click', function() {
        let bookname = $('#iptBookname').val()
        let author = $('#iptAuthor').val()
        let shiner = $('#iptshiper').val()
        if (!bookname || !author || !shiner) {
            alert(
                '请输入完整内容'
            )
        }else {
            $.post('http://www.liulongbin.top:3006/api/addbook', {
                bookname : bookname,
                author : author,
                publisher : shiner
            }, function(res) {
                if(res.status == 500) return alert('请输入完整内容')
                getData() 
            })
        }
    })
    </script>
</body>
</html>

6.

第二个案例是一个聊天机器人的案例，这个案例还多有趣的，实现的功能有输入内容可出现到聊天的内容区域，对面自动回复机器人也可以对应的回答你，然后就是当聊天内容超过一页之后再发消息，会自动回弹到聊天框的底部，这个要用到一个scrol.js 调用一下里面的resetui（）即可，总体步骤分为先将用户输入内容渲染到聊天框，然后获取到用户输入内容并且发送到服务器获取机器人的回复内容并渲染到聊天界面，再通过一个接口将回复的消息转为语音播放，最后通过输入框的键盘事件检测是否按下回车来点击发送按钮一次

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <title>聊天机器人</title>
  </head>

  <body>
    <div class="wrap">
      <!-- 头部 Header 区域 -->
      <div class="header">
        <h3>小思同学</h3>
        <img src="img/person01.png" alt="icon" />
      </div>
      <!-- 中间 聊天内容区域 -->
      <div class="main">
        <ul class="talk_list" style="top: 0px;">
          <li class="left_word">
            <img src="img/person01.png" /> <span>你好</span>
          </li>
        </ul>
        <div class="drag_bar" style="display: none;">
          <div
            class="drager ui-draggable ui-draggable-handle"
            style="display: none; height: 412.628px;"
          ></div>
        </div>
      </div>
      <audio style="display: none;" autoplay id="voice"></audio>
      <!-- 底部 消息编辑区域 -->
      <div class="footer">
        <img src="img/person02.png" alt="icon" />
        <input type="text" placeholder="说的什么吧..." class="input_txt" />
        <input type="button" value="发 送" class="input_sub" />
      </div>
    </div>
    <script type="text/javascript" src="js/scroll.js"></script>
    <script src="./js/chat.js ">
     
    </script>
  </body>
</html>

实现原理

$(function(){
    // 初始化右侧滚动条
    // 这个方法定义在scroll.js中
    // 该方法的作用是一发消息就定位到聊天框的最底部
    resetui()
    // 1.将用户输入内容渲染到聊天窗口
    var text = ''
    $('.input_sub').on('click',function() {
      var text = $('.input_txt').val()  
      if(text == '') {
          return $('.input_txt').val('')
      } else {
        $('.talk_list').append('<li class="right_word"><img src="img/person02.png" /> <span>'+text+'</span></li>')
        resetui()
        $('.input_txt').val('')
        getMsg(text)
      }
    })
    // 2.发情请求获取聊天消息
    function getMsg(text) {
        $.ajax({
            type : 'get',
            url : 'http://www.liulongbin.top:3006/api/robot',
            data : {
                spoken : text
            },
            success : function(res) {
                if (res.message == 'success') {
                    let msg = res.data.info.text
                    $('.talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>'+msg+'</span></li>')
                    resetui()
                    getAudio(msg)
                }
            }
        })
    }
    // 3.将回复信息转为语音播放
    function getAudio(msg) {
        $.ajax({
            type : 'get',
            url : 'http://www.liulongbin.top:3006/api/synthesize',
            data : {
                text : msg
            },
            success : function(res) {
                if (res.status == 200) {
                    $('#voice').attr('src', res.voiceUrl)
                }
            }
        })
    }
    // 4.使用回车发送消息
    $('.input_txt').on('keyup', function(e) {
        console.log(e.keyCode);
        if (e.keyCode == 13) {
            $('.input_sub').trigger('click')
        }
    })
  })

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<button>
    发起不带参数的请求
</button>
<body>
    <script src="./lib/jquery.js"></script>
    <script>
    $('button').on('click', () =>  $.get('http://www.liulongbin.top:3006/api/getbooks', res => console.log(res)))        
    </script>
</body>
</html>
ajax初步spancolorrgbaJavaScript

有关ajax - 初步介绍的更多相关文章

  1. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  2. Unity 热更新技术 | （三） Lua语言基本介绍及下载安装 - 2

    ?博客主页：https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创，首发于CSDN??学习专栏推荐：Unity系统学习专栏?游戏制作专栏推荐：游戏制作?Unity实战100例专栏推荐：Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正！?未来很长，值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

  3. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. H2数据库配置及相关使用方式一站式介绍（极为详细并整理官方文档） - 2

    目录H2数据库入门以及实际开发时的使用1.H2数据库的初识1.1H2数据库介绍1.2为什么要使用嵌入式数据库？1.3嵌入式数据库对比1.3.1性能对比1.4技术选型思考2.H2数据库实战2.1H2数据库下载搭建以及部署2.1.1H2数据库的下载2.1.2数据库启动2.1.2.1windows系统可以在bin目录下执行h2.bat2.1.2.2同理可以通过cmd直接使用命令进行启动：2.1.2.3启动后控制台页面：2.1.3spring整合H2数据库2.1.3.1引入依赖文件2.1.4数据库通过file模式实际保存数据的位置2.2H2数据库操作2.2.1Mysql兼容模式2.2.2Mysql模式

  6. jquery - 使用 Rails 3 学习 Ajax 的资源 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。有没有学习Ajax(jQuery)和Rails3的好资源？

  7. ruby-on-rails - 当 AJAX 调用在 Ruby on Rails 中失败时重定向到 500 页 - 2

    我正在使用一个用RubyonRails构建的应用程序，目前错误处理非常差。如果通过ajax执行Controller方法，并且该方法导致500(或404或任何其他响应)，则呈现500.html页面并将其作为AJAX请求的结果返回。显然，javascript不知道如何处理该HTML，网页看起来只是在等待响应。在AJAX调用期间发生错误时，rails是否有一种简单的方法来呈现error.rjs模板？ 最佳答案 您可以在Controller的rescue_action或rescue_action_in_public方法中使用respond_

  8. jquery - Rails 4 如何捕捉 ajax :success event - 2

    我正在使用Rails4.0。我正在发送这样的事件(注意:remote=>true):true,:class=>"rate-btnyes-btnbtnbtn-defaultbtn-sm"}%>我的Controller看起来像这样:defratevideo=Video.find_by(hashed_id:params[:id])action=params[:yesno]putsvideo.hashed_idputsactionrespond_todo|format|if(action=='yes')new_rating=video.rating==1?0:1video.update(is_

  9. ruby-on-rails - rails 如何在调用 ajax 删除表行后删除它？ - 2

    如果我有一个链接-=link_to'ajaX',ajax_delete_link_path(link),data:{:confirm=>'Areyousure?',:remote=>true}有一条路线:get'ajax_delete_link/:id',to:'links#ajax_delete_link',as::ajax_delete_link和一个链接Controller:defajax_delete_link@link=Link.find(params[:id])@link.destroyrespond_todo|format|format.jsendend和ajax_del

  10. Spring Cloud Gateway 服务网关的部署与使用详细介绍 - 2

    为什么需要服务网关传统的单体架构中只需要开放一个服务给客户端调用，但是微服务架构中是将一个系统拆分成多个微服务，如果没有网关，客户端只能在本地记录每个微服务的调用地址，当需要调用的微服务数量很多时，它需要了解每个服务的接口，这个工作量很大。有了网关之后，网关作为系统的唯一流量入口，封装内部系统的架构，所有请求都先经过网关，由网关将请求路由到合适的微服务。使用网关的好处1）简化客户端的工作。网关将微服务封装起来后，客户端只需同网关交互，而不必调用各个不同服务；（2）降低函数间的耦合度。一旦服务接口修改，只需修改网关的路由策略，不必修改每个调用该函数的客户端，从而减少了程序间的耦合性（3）解放开发

随机推荐