Ajax笔记

肥宅洛夫特斯基

已于 2022-04-23 16:56:49 修改

阅读量2.5k

点赞数

分类专栏： web前端学习笔记文章标签： ajax

于 2022-04-23 16:31:03 首次发布

本文链接：https://blog.csdn.net/qq_51246916/article/details/124365922

版权

title: Ajax
categories: web前端学习笔记
date: 2022-03-01 15:27:51
tags:

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

URL地址

组成部分

通信协议，存放该资源的服务器名称，存放位置

客户端与服务器之间的通信过程，是请求-处理-响应三个步骤

那么如何请求数据？ -->使用对象XMLHttpRequest,简称xhr，是浏览器提供的js成员，通过xhr可以请求服务器上的数据资源。

var xhrObj = new XMLHttpRequest()

get是问服务器要资源，post是向服务器发送资源。

jquery中的ajax

`$.get()`函数的用法

$.get(url,[data],[callback]),其中url是必须有的，data和callback是可有可无的

参数名	参数类型	说明
url	string	请求的资源地址
data	object	请求资源期间要携带的参数
callback	function	请求成功时的回调函数

发起不带参数的请求

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

打开网页后，用f12查看请求情况，切换到network栏，然后切换到xhr栏，查看。

从headers可以看到请求的连接，以及请求的方式、请求的状态。

从response可以看到无格式的请求到的内容，有格式的则在preview栏。

发起带参数的请求

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

`$.post()`函数

和get相似。

$.post(url,[data],[callback]),其中url是必须有的，data和callback是可有可无的

参数名	参数类型	说明
url	string	提交数据的地址
data	object	要提交的数据
callback	function	数据提交成功时的回调函数

代码ex：

<body>
  <button id="btn">用post提交数据</button>
  <script>
    $(function () {
     
      $('#btn').on('click', function () {
     
        $.post('http://www.liulongbin.top:3006/api/addbook',//数据提交的url地址
          {
      bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' },//要提交的数据
          function (res) {
     
            console.log(res);
          })
      })
    })
  </script>
</body>

`$.ajax()`函数

$.ajax({
   
   type: '', // 请求的方式，例如 GET 或 POST
   url: '',  // 请求的 URL 地址
   data: {
    },// 这次请求要携带的数据
   success: function(res) {
    } // 请求成功之后的回调函数
})

发起get请求

$.ajax({
   
   type: 'GET', // 请求的方式
   url: 'http://www.liulongbin.top:3006/api/getbooks',  // 请求的 URL 地址
   data: {
    id: 1 },// 这次请求要携带的数据
   success: function(res) {
    // 请求成功之后的回调函数
       console.log(res)
   }
})

发起post请求

$.ajax({
   
   type: 'post',
   url: 'http://www.liulongbin.top:3006/api/addbook',//数据提交的url地址
   data: {
    bookname: '我也不想知道', author: '司马迁', publisher: '上海图书出版社' },
   success: function (res) {
   
        console.log(res);
          }
        })

javascript trim()方法可以去除掉字符串头尾的空白符，其中空白符包括空格，tab，换行符等

form表单使用

form标签的属性

属性	值	描述
action	url地址	规定当提交表单时，向何处发送表单数据
method	get或post	规定以何种方式把表单数据提交到action URL
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在发送表单数据之前如何对其进行编码
target	_blank _self _parent _top framename	规定在何处打开action URL

action

action属性的值应该是由后端提供的一个url地址，这个url地址专门负责接收表单提交过来的数据。如果form表单没有指定action属性值，那么action的默认值就是当前页面的url地址。提交表单后，页面会立刻跳转到action属性指定的url地址

method

默认情况下，method 的值为 get

get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中，<form> 表单的 post 提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提交表单。

enctype

值	属性
application/x-www-form-urlencoded	在发送前编码所有字符（默认）

表单同步提交

表单同步提交是指点击submit按钮后，页面会直接跳转到action URL。

缺点是导致用户体验感差、页面之前的状态和数据都会丢失

解决方法:表单只负责采集数据，ajax负责将数据提交到服务器

通过ajax提交表单数据

监听表单提交事件

$('#form1').submit(function(e) {
   
   alert('监听到了表单的提交事件')
})

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

阻止表单默认提交行为

$('#form1').submit(function(e) {
   
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

$('#form1').on('submit', function(e) {
   
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

快速获得表单中的数据

serialize()函数

$(selector).serialize()

serialize()函数可以一次性获得表单中的所有数据

<form id="form1">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>

$('#form1').serialize()
// 调用的结果：
// username=用户名的值&password=密码的值

注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性。

jquery对象转化为原生dom对象->使用 jquery对象[0]

模板引擎的使用

当我们想要把某个ui结构渲染到页面上时，一般情况下会采用字符串拼接的方式。但是如果ui结构比较复杂，此时对于单引号的使用就要格外注意，而且需求一旦发生变化，修改起来也

最低0.47元/天解锁文章