ajax上传string数据,用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中接收存储数据

<?php 

//设置字符集utf-8(正常显示中文)

header('content-type:text/html;charset=utf-8');

//引入函数

require_once’../tools.php’;

//接收字符数字等数据

$数据=$_POST[“键名”];

//保存文件在后台的存储地址，用存储文件夹路径+拼接文件名，其中my_uploadFile返回的是文件名带后缀

$文件变量名 = '后台存储的文件夹路径'.my_uploadFile('feature','相对于接口的目标文件夹路径');

//数据和文件保存到数据库

$sql=” …”;

$rowNum = my_execute($sql);

echo $rowNum;

?>