用AJAX2.0上传富文本编辑器内容、字符串、文件等

步骤1 form准备

删掉 form中的action,method等信息,修改submit为普通的button(这些设置会导致点击时刷新页面)

步骤2 为“提交”功能按钮注册单击事件

事件函数主体为Ajax2.0提交文件

//步骤2.1 创建对象
var xhr = new XMLHttpRequest();

//步骤2.2 设置请求行(get请求数据写在url后)
xhr.open('post','接口地址/php');

//步骤2.3 创建请求头(ajax2.0这步不用写)
//步骤2.4 注册回调函数
  xhr.onload = function(){
      函数体;
  }

//步骤2.5 要发送的数据(form表单的数据对象)整合
  var sendData = new FormData(document.querySelector('form'));

//WangEditor因为写在了div里,所以需要把富文本编辑器里的内容追加到sendData里
    sendData.append(‘content’, editor2.txt.html());

//步骤2.6 请求主体发送(get请求为空或写null;post请求数据)
    xhr.send(sendData);

步骤3 后台接口php中接收存储数据

你可能感兴趣的:(用AJAX2.0上传富文本编辑器内容、字符串、文件等)