AJAX小结一

最新推荐文章于 2024-05-18 11:12:26 发布

benlalagang

最新推荐文章于 2024-05-18 11:12:26 发布

阅读量168

点赞数

分类专栏： jquery ajax 文章标签： ajax jquery

本文链接：https://blog.csdn.net/benlalagang/article/details/126127333

版权

jquery 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

ajax

10 篇文章 0 订阅

订阅专栏

因为浏览器原生的XHR-XMLHttpRquest 用法比较复杂，所以jQuery对XMLHttpRquest进行了封装，提供了一系列Ajax相关的函数极大的降低了Ajax的使用难度。

jQuery中发起Ajax请求最常用的三个方法

$.get() $.post() $.ajax()

$.get()

专门发起get请求，请求服务器的数据

$.get(url,[data],[callback])

参数名	参数类型	是否必选	说明
url	string	是	要请求的地址接口
data	object	否	请求期间要携带的参数
callback	function	否	请求成功时的回调函数

$.post()

专门发起post请求，从而向服务器提交数据

$.post(url,[data],[callback])

参数名	参数类型	是否必选	说明
url	string	是	要请求的地址接口
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

$.ajax()

功能比较综合的函数，可以进行详细的配置

$.ajax({

type:'', // 请求的方式 GET / POST

url:'', // 请求的URL接口地址

data:{}, // 这次请求要携带的数据

success:function(res){} // 请求成功之后的回调函数

})

分享综合案例:聊天机器人

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04聊天机器人</title>
  <script src="http://www.wsg3096.com/ass/jquery-3.6.0.js"></script>
  <link rel="stylesheet" href="http://www.wsg3096.com/ass/initialize.css">
  <style>
    .iphone{
      background-image: url("pic/robot.png");
      width: 436px;
      height: 882px;
      margin:40px auto;
      background-color: #f0f0f0;
      overflow: hidden;
      border-radius: 70px;
      position: relative;
      padding: 80px 36px;
    }
    ul{
      width: 100%;
      height: 100%;
      overflow-y: scroll;
    }

   ul::-webkit-scrollbar {/*滚动条整体样式*/
      width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    ul::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: #e5e5e5;
    }
    ul::-webkit-scrollbar-track {/*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 10px;
      background: #EDEDED;
    }


    li{
      display: block;
      height: auto;
      clear: both;
      margin-bottom: 6px;
    }



    .rot{
      float: left;
      width: 80%;
      background-image: url("pic/wf.png");
      background-size: 40px;
      background-repeat: no-repeat;
      background-position: left top;
      padding-left: 40px;
      padding-bottom: 5px;
    }

    .user{
      float: right;
      width: 80%;
      background-image: url("pic/wsg.png");
      background-size: 40px;
      background-repeat: no-repeat;
      background-position: right top;
      padding-right: 40px;
      clear: both;
      padding-bottom: 5px;
    }

    .rot .talk{
      line-height: 1.5;
      height: auto;
      background: white;
      display: inline-block;
      padding: 6px 16px 6px 8px;
      border: 1px solid #e5e5e5;
      position: relative;
      margin-left: 12px;
    }

    .user .talk{
      line-height: 1.5;
      height: auto;
      background: #9eea6a;
      display: inline-block;
      padding: 6px 8px 6px 16px;
      position: relative;
      margin-right: 12px;
      float: right;
    }

    .rot .talk:after{
      content: '';
      width: 12px;
      height: 12px;
      background: white;
      position: absolute;
      left: -6px;
      top: 8px;
      transform: rotate(45deg);
    }

    .user .talk:after{
      content: '';
      width: 12px;
      height: 12px;
      background: #9eea6a;
      position: absolute;
      right: -6px;
      top: 8px;
      transform: rotate(45deg);
    }

    .bottom{
      position: absolute;
      height: 56px;
      bottom: 20px;
      left: 40px;
    }

    button{
      height: 30px;
      width: 60px;
      background: #1770de;
      border-radius: 4px;
      color: white;
      font-size: 14px;
      border: none;
      float: right;
      cursor: pointer;
      margin-left: 10px;
    }

    input{
      height: 30px;
      outline: none;
      width: 260px;
      padding-left: 6px;
    }
  </style>
</head>
<body>
<div class="iphone">
  <ul>
    <li>
      <div class="rot">
        <span class="talk">您好，想我了吗</span>
      </div>
      <div class="cl"></div>
    </li>
  </ul>

  <div class="bottom">
    <input type="text">
    <button>发送</button>
  </div>
</div>
<!--一个音频文件自动播放的 请求过来的音频URl 会添加进来-->
<audio src="" id="voice" autoplay style="display:none"></audio>

<script>
  // 发送按钮点击事件
  $(function () {
    $('button').on('click',function () {
      let input = $('input')
      let text = input.val().trim() // 获取输入框的文本

      if (text.length<=0){
       alert('输入不能为空')
      }else {
        //  添加到页面当中
        $('ul').append('<li><div class="user"><span class="talk">'+text+'</span></div><div class="cl"></div></li>')
      }
      getMes(text)// 把这些文本发送给服务器  调用函数
      $('input').val('') // 发送完成后清空输入框
    })


    // 文本发送给服务器的函数
    function getMes(text) {
      $.ajax({
        method:'GET',
        url:'http://www.liulongbin.top:3006/api/robot',
        data:{spoken:text}, // 对应的属性应该只能是 spoken
        success:function (res) {
          if (res.message == 'success'){
            let msg  = res.data.info.text
            // 把请求回来的数据 添加到页面当中
            $('ul').append('<li><div class="rot"><span class="talk">'+msg+'</span></div><div class="cl"></div></li>')
            getVoice(msg) // 调用 请求音频的函数 传实参为 服务器请求回来的 数据
          }
        }
      })

    }

    function getVoice(text) {
      $.ajax({
        method: 'GET',
        url:'http://www.liulongbin.top:3006/api/synthesize',
        data:{text:text},
        success:function (res) {
          if (res.status === 200){
            // 请求回来的Url  地址 加入到 上面标签 src 当中
            $('#voice').attr('src',res.voiceUrl)
          }
        }
      })
    }
  })

  // 输入框中 键盘按下事件 直接调用 button 的点击事件
  $('input').on('keyup',function (e) {
      if (e.keyCode == 13){
        $('button').click()
      }
  })

</script>

</body>
</html>