AJAX小结一

因为浏览器原生的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){} // 请求成功之后的回调函数

})

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


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>
<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('
'+text+'
')

}
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('
'+msg+'

')

            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>

AJAX小结一

$.get()

参数名

参数类型

是否必选

说明

$.post()

参数名

参数类型

是否必选

说明

$.ajax()

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