博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax2.0
阅读量:5291 次
发布时间:2019-06-14

本文共 2463 字,大约阅读时间需要 8 分钟。

一、formData向后台传数据<br>

1.formData有set、get、append等方法<br>
1)set():设置数据<br>
var formData=new FormData();<br>
formData.set('a',2);<br>

如果有两个set()方法,且key相同,比如:

formData.set('a',2);
formData.set('a',3);
则返回的是3

2)append():添加数据

var formData=new FormData();
formData.set('a',2);

如果有两个set()方法,且key相同,比如:

formData.set('a',2);
formData.append('a',3);
则返回的是[2,3]
3)get():得到数据
比如通过ajax向后台传数据:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.οnlοad=function(){
var oBtn1=document.getElementById('btn1');

oBtn1.οnclick=function(){

var xhr=new XMLHttpRequest();
var formData=new FormData();
formData.set('a',12);
xhr.open('post','1.php',true);
xhr.send(formData);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
alert(xhr.responseText);
}else{
alert('失败了')
}
}
}
}
}
</script>
</head>
<body>
<input type="button" name="" value="ajax请求" id="btn1">
</body>
</html>

```

```php
<?php
echo $_POST['a']+$_POST['b'];
?>
```

二、formData文件上传

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.οnlοad=function(){
var oBtn=document.getElementById('btn1');
var oF1=document.getElementById('f1');

oBtn.οnclick=function(){

var formData=new FormData();
formData.set('f1',oF1);

var xhr=new XMLHttpRequest();

xhr.upload.οnlοad=function(){
console.log('上传成功')
}
xhr.upload.οnprοgress=function(ev){
console.log(ev.loaded+'/'+ev.total);
}

xhr.open('post','2.php',true);

xhr.send(formData);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
alert(xhr.status)
}
}
}
}
</script>
</head>
<body>

 

<input type="file" id="f1">

<input type="button" name="" value="ajax请求" id="btn1">
</body>
</html>

```

0.formData.set('名字', file类型的input)
1.xhr.upload.onload:上传完成
2.xhr.upload.onprogress:进度变化

三、CORS跨域<br>

1.如果是ajax1.0,添加res.setHeader('Access-Control-Allow-Origin','*');即可
```JavasSript
const http=require('http');

let httpServer=http.createServer((req,res)=>{

res.setHeader('Access-Control-Allow-Origin','*');
res.write('aaaa');
res.end();
});

httpServer.listen(8080);

```

2.如果是ajax2.0,需要加上allowHosts.indexOf(req.headers['origin'])!=-1的判断

```JavasSript
const http=require('http');
let allowHosts=['taobao.com','baidu.com'];
let httpServer=http.createServer((req,res)=>{
if(allowHosts.indexOf(req.headers['origin'])!=-1){
res.setHeader('Access-Control-Allow-Origin','*');
}
res.write('aaaa');
res.end();
});

httpServer.listen(8080);

```

转载于:https://www.cnblogs.com/chaofei/p/7857938.html

你可能感兴趣的文章
Selenium_Python接口-Alert类
查看>>
linux远程win7教程
查看>>
获取当前线程的对象
查看>>
函数指针介绍及其用法
查看>>
WinForm多线程+委托防止界面假死
查看>>
WPF拖放功能实现zz
查看>>
一、HTML和CSS基础--HTML+CSS基础课程--第6部分
查看>>
HDU2553 N皇后问题---(dfs)
查看>>
php.ini 详解
查看>>
SpringMVC中MultipartFile参数问题
查看>>
移动应用开发选型:向左还是向右?
查看>>
开发进度一
查看>>
十天冲刺(6)
查看>>
加载selenium2Library失败---robotframework环境搭建(site-packages下无selenium2library文件夹)...
查看>>
MyBaits学习
查看>>
实体标签,媒体标签,飘动标签
查看>>
MySQL安装的详细步骤
查看>>
pat1121-1131
查看>>
AtCoder Regular Contest 101 D - Median of Medians
查看>>
小贾学习设计模式笔记-----------工厂模式(一)
查看>>