【javascript基础——系列1】前端页面ajax连接后台服务器传输数据

系列文章

【javascript基础——系列1】前端页面ajax连接后台服务器传输数据

【javascript基础——系列2】前端页面axios连接后台服务器传输数据

【javascript基础——系列3】js中的事件的事件冒泡、事件捕获

【javascript基础——系列4】关于js的数据类型以及判别方法

【javascript基础——系列5】js的defer和async；parsesint；图片压缩

【javascript基础——系列6】常见的5种JS设计模式；发布订阅者模式

【javascript基础——系列7】变量提升函数提升；内存泄漏

【javascript基础——系列8】函数传参传递值还是引用；函数式编程

【javascript基础——系列9】函数防抖与节流

【javascript基础——系列10】js中隐藏元素的几种方法以及代码

【javascript基础——系列11】跨域存在的原因以及解决办法

---

1.ajax原理描述

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

2.ajax优点

（1）页面无刷新更新数据
（2）异步与服务器通信

3.ajax缺点

（1）AJAX的安全问题，容易受到攻击。
（2）AJAX 干掉了Back和History功能，即对浏览器机制的破坏。

优缺点	描述
优点	局部更新
优点	原生支持，不需要任何插件
优点	局部更新
缺点	可能破坏浏览器后退功能
缺点	嵌套回调，难以处理

4.前端使用ajax与后台传输数据

"http://localhost:5000/login"为后台的服务器地址；5000为端口号；res为从服务器接收到的数据，data为发送给服务器的数据，数据格式为json。

var dict={'username': 'admin', 'password': mima,'newpassword':xinmima};
    $.ajax({
      type: "POST",
      url: "http://localhost:5000/login",
      contentType: 'application/json; charset=UTF-8',
      data: JSON.stringify(dict) ,
      dataType: "json",
      success: function(res) {
         var dat=res['massage'];
         if(dat==1){
           alert('修改成功，请记住密码');
         }
         else if(dat==2){
           alert('密码修改失败，请检查初始密码')
         }
      }
    })

在vue中使用axios进行通信或者使用$http.post进行通信的在另一栏：axios与后台进行post通信
后台发送数据给前端的文章：后台发送数据

码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~