其实在jquery中的ajax请求，相对于js中的get（），post（）请求函数来说，我觉得要好用一些：下面我将介绍几个jQuery中关于ajax请求的函数用法：

$.get和$ .post

相对于js原生中，我觉得这个要好用得多，直接上代码吧。

  <label for="">id:</label>
  <input type="text">
  <button>发送请求</button>

在这里虽然有了这个发送请求的结构，但是没有发送请求的地址呀，所以，这时候，我们要自己暂时担任一下后端的工程师，写一个小接口，让我们发的东西，有地方可以接收并给我们反馈！！！

<?php
$id = $_GET['id'];
echo json_encode(array(
"id" =>$id,
"title" => "游戏机",
"price" => 9.9
));
?>

写好了接口以后，下面我们就要开始发请求了，通过点击<button>发送请求</button>来发送本次请求，并得到后端返回的数据。

$.get('php的地址'，{id：id}，response =>{
    conlose.log(response)
},'json')

$.post('php的地址'，{id：id}，response =>{
    conlose.log(response)
},'json')
//当使用post的时候，后端中的请求方式，也要相应的改成post

参数意思：

第一个：接口地址
第二个：请求的数据，可以用对象，也可以用模板字符串拼接的方式
第三个:回调函数，成功后干的事，在这里的意思就是，当请求成功之后，返回请求的数据

$.ajax

看了以上方式后，是不是觉得比之前的js原生要简单，可是jquery还给我们提供了更加强大的请求函数，就是$.ajax()函数，里面可以把你想干的事都编成一个对象，传进去！！

在以上的结构和接口不变的情况下,我来写一下，并补充一些关于Ajax常用的函数：

$.ajax({
    url：'php接口地址',//当然，接口不一定是php
    method：'get/post',
    data{id},//id是解构赋值的方式
    success：function(response){  //请求成功以后要干的事
        console.log(response)
    }，
    error：function(){ //请求失败后的返回值
        alert('网络错误，请重试')
    }，
    dataType:'jsons',//请求后，返回的文本类型
})

ajaxSetup()

这个函数的主要作用是设置一些在我们开发中，会用到的公共请求内容，以一个加载时的转圈动画举例： html,css主要是把它写出来，用动画来渲染，我只写script代码了

$.ajaxSetup({
    beforeSend: function(){
        $('#circle').show()
    },
    complete: function(){
        $('#circle').hide()
    }
})


$('button').on('click', function () {
 const id = $('input').val()
 $.ajax({
   url: './01.php',
   method: 'get',
   data: { id },
   success: function (resp) {
     console.log(resp)
   },
   error: function () {
     console.log('请求失败')
   },
   dataType: 'json'
 })

    })

此外，需要注意的一点是，我们可以在beforeSend函数里面，通过return false来取消本次请求

$.getJSON()

使用一个HTTP GET请求从服务器加载JSON编码的数据。

简言意该，我们可以利用$.getJSON()函数，来实现跨域请求

以百度接口为例：sp0.baidu.com/5a1Fazu8AA5…?

<input type="text">

结构就是设置一个可以输入内容的区域，接下来的script代码才是关键

$('input').on('keyup',function(){
    const value = $(this).val()
    $.getJSON('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=?'),{wd:value},response =>{
        console.log(response)
    }
})

这样我们就能在后台看到搜索的相关内容了，注意，在回调函数cb后必须传**?**,其实它主要是帮我们干了两件事：

cb=? 替换成了 cb=jQuery3410048638306859953406_1576808970575（后面的这串我们可能不相同，并不是唯一）
把请求后面写的回调函数提到全局，并且赋值为 jQuery3410048638306859953406_1576808970575 经过这两步之后，就可以把一个请求函数写成一个普通请求函数的样子

serialize()

将用作提交的表单元素的值编译成字符串。

什么意思呢？还是看代码吧

 
  <p id="results"><b>Results: </b> </p>
  <form>
      <select name="single">
        <option>Single</option>
        <option>Single2</option>
    </select>
      <select name="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
 </select><br/>
 <input type="checkbox" name="check" value="check1"/> check1
 <input type="checkbox" name="check" value="check2" checked="checked"/> check2
 <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
 <input type="radio" name="radio" value="radio2"/> radio2
 <button>提交</button>

<button>提交</button>默认的属性就是提交

<script>
  $('form').on('submit', function (e) {
    e.preventDefault()
    // 把当前表单里的所有要提交的数据序列化成urlencoded的字符串
    console.log($(this).serialize())
  })
</script>

就是给这个表单元素绑定上一个提交的事件
取消浏览器提交表单时的默认跳转行为
把当前表单里的所有要提交的数据序列化成urlencoded的字符串

load

接下来说的这个方法才是今天要说的重点。

它的意思是：从服务器载入数据并且将返回的 HTML 代码并插入至匹配的元素中。

就相当于以前我们在写静态的页面时，遇到重复的页面结构，我们是不是复制，粘贴，这确实方便，但是当项目要修改时，你是不是要一个个的改，要是有一百个页面怎么办，改一百次吗？当然不是，因为当你拥有了load（）函数的方法，你会发现，你发现了新大陆。

我将创建两个html文件来演示：

html1 上代码：

<div class="logo">
  logo
</div>
<nav>
  <ul>
    <li>首页</li>
    <li>列表页</li>
    <li>关于</li>
    <li>联系</li>
    <li>新闻</li>
  </ul>
</nav>

html2:

<body>
  <header></header>
  <div class="main">
    <h1>首页</h1>
  </div>

其实接下来，我要做的事就是在HTML2中建立一个空的<header></header>标签，把html1中的<header></header>标签中的内容渲染到html2的<header></header>标签中。

html2 script

<script>
    // 拿到全部html1中的header标签里的内容
     $('header').load('./html1.html')
    // 可以在后面写上选择器决定加载某一部分
    $('header').load('./html1.html .logo')
  </script>

其实load（）和绑定事件一起用的时候要注意一个问题，要把绑定的事件写在load（）的回调函数里才会有作用！！！

<script>
    // load方法是一个异步方法，所以只能在回调里才能拿到加载的元素
    $('header').load('./html1.html', () => {
      console.log( $('.logo') )
      $('.logo').on('click', function () {
        console.log(123)
        alert($(this).html())
      })
    })

    
  </script>

你必须知道的jQuery中的ajax相关事件

.post