ajax发起请求及ajax跨域发起请求

使用ajax发起GET请求

 $(function () {
      $('#btnGET').on('click', function () {
        $.ajax({
          type: 'GET',
          url: 'http://www.llb.top:3006/api/getbooks',
          data: {
            id: 1
          },
          success: function (res) {
            console.log(res)
          }
        })
      })
    })

使用ajax发起POST请求

    $(function () {
  $('#btnPOST').on('click', function () {
    $.ajax({
      type: 'POST',
      url: 'http://www.llb.top:3006/api/addbook',
      data: {
        bookname: '史记',
        author: '司马迁',
        publisher: '上海图书出版社'
      },
      success: function (res) {
        console.log(res)
      }
    })
  })
})

使用ajax发起跨域请求

	 $.ajax({
  method: 'GET',
  url: 'http://www.llb.top:3006/api/jsonp',
  data: {
    name: 'zs',
    age: 20
  },
  success: function (res) {
    console.log(res)
  }
})  

使用axios发起POST请求

document.querySelector('#btn4').addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'http://www.llb.top:3006/api/post',
        data: {
          name: '娃哈哈',
          age: 18,
          gender: '女'
        }
      }).then(function (res) {
        console.log(res.data)
      })
    })

使用jQuery发起JSONP数据请求

<script>
$(function () {
  // 发起JSONP的请求
  $.ajax({
    url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
    // 代表我们要发起JSONP的数据请求
    dataType: 'jsonp',
    // jsonp: 'cb', // 自定义参数名字
    jsonpCallback: 'abc', // 自定义回调函数名（参数的值）
    success: function (res) {
      console.log(res)
    }
  })
})