AJAX——在网页中请求数据的方式(GET,POST)

1.什么是URL？

URL是统一资源定位符，浏览器通过URL定位资源的存放位置

URL地址组成：
（1）客户端与服务器之间的通信协议

（2）存有该资源的服务器名称

（3）资源在服务器上的具体存放位置

客户端与服务器之间的请求分为：请求，处理，响应3个步骤

在网页中如何请求数据？

在网页中请求数据要用到XMLHttpRequest对象，简称xhr，这是浏览器中内置的JS对象，用于请求服务器上的资源

用法

var xhr=new XMLHttpRequest()

资源请求方式

（1）get请求：常用于获取服务器资源

（2）post请求，常用于向服务器发送资源

ajax就是异步的JavaScript和XML

在网页中利用XMLHttpRequest对象和服务器进行交互就是AJAX

jQuery中的AJAX

1.$.get()

语法如下

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

//url:必选项，参数类型是字符串
//[data]:可选项，参数类型是对象，请求资源期间携带的参数，发送到服务器
//[callback]:可选项，参数类型是function，请求成功的回调函数

示例

$.get('https://mp.csdn.net/mp_blog/creation/editor?spm=1001.2014.3001.4503',function(res){
console.log(res)
})

<button id="btnGet">发起不带参数的get请求</button>
<script>
$(function(){
$('#btnGet').on('click',function(){
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
console.log(res);
})
})
})
</script>

  <button id="btnGET">带参数的GET请求</button>
  <script>
    $(function () {
      $('#btnGET').on('click', function () {
        $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 2 }, function (res) {
          console.log('res');
        })
      })
    })
  </script>

2.$.post()

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

 <button id="postBtn">发起POST请求</button>
  <script>
    $('#postBtn').on('click', function () {
      $.post('http://www.liulongbin.top:3006/api/addbook'), {
        bookname: 'jjj', author: '是哦L', publisher: '上海教育出版社'
      }, function (res) {
        console.log(res);
      }
    })
  </script>

3.$.ajax()既可以发起post请求也可以发起get请求

$.ajax({

type:'';  //请求类型
url:'';   //请求的URL地址
data:{};   //请求要携带的数据
success:function(res){}  //请求成功的回调函数

})

  <button id="getBtn">$.ajax发起GET请求</button>
  <script>
    $(function () {
      $('#getBtn').on('click', function () {
        $.ajax({
          type: 'GET',
          url: 'http://www.liulongbin.top:3006/api/getbooks',
          data: { id: 1 },
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>

接口：

使用AJAX请求数据时，请求的URL地址就是数据接口，简称接口，每个接口必须有请求方式

接口文档：

接口的说明文档，是调试接口的依据，包含了对URL，参数，以及输出内容的说明

接口文档的组成部分：

1.接口名称        2.接口URL        3.接口调用方式        4.参数格式        5.响应格式        6.返回示例

表单组成：

表单标签，表单域，表单按钮

form标签的属性

<form></form>用来采集数据

属性	值	描述
action	URL地址	规定表单提交时向何处提交数据
method	get或post	规定以何种方式吧表单数据提交到action URL
enctype	application/x-www-form-urlencoded	发送前编码所有字符，默认
	multipart/form-datatext/plain	不i对字符编码，使用包含文件上传控件的表单时，必须使用该值，规定在发送表单之前如何进行编码
target	_blank	新窗口打开
	_self	在相同框架中打开
	_parent	规定在何处打开action URL
	_top
	framename

表单的同步提交：
通过点击submit按钮，触发表单提交的操作，使页面跳转到action url的行为，叫做表单的同步提交

通过AJAX提交表单

<form id='form1'></form>
<script>
$('#form1').submit(function(e){
alert('监听到表单提交事件');
})

$('#form1').on('click',function(e){
alert('监听到表单提交事件');
})

</script>

阻止表单的默认行为

$('#form1').submit(function(e){
e.preventDefault();
})

快速获取表单数据

$(seletor).serialize()

$('#form1').submit(function(e){
e.serialize();
})