fetch方式发送请求
创始人
2025-07-09 11:17:02
0

1、以get方式发送查询字符串

fetch("server.php?查询字符串"[,{
method:"get",
cache:"no-cache",  //设置为不使用缓存
credentials:"include"  //设置为使用cookie
}]).then(response=>{
  if(response.ok){    
    response.text().then(text=>{
      alert(text);
    });
  }
});


url=new URL("http://webzone.cc/server.php");
url.searchParams.append("myname","wswh");
url.searchParams.append("age",18);
fetch(url).then();

params=new URLSearchParams({
myname:"wswh",
age:18
});
fetch(`http://webzone.cc/server.php?${params}`).then();

//内容类型为:application/x-www-form-urlencoded

/*
response.text():返回文本。
response.json():返回json对象。
response.formData():返回FormData对象。
response.blob():返回二进制对象
response.arrayBuffer()
*/


2、以post方式发送查询字符串

fetch("server.php",{
method:"post",
body:"myname=wswh&age=18",
headers:{"Content-Type":"application/x-www-form-urlencoded"}
}).then(response=>{
  if(response.ok){
    response.text().then(text=>{
      alert(text);
    });
  }
});

params1=new URLSearchParams()
params1.append("myname","wswh")
params1.append("age",18)
fetch("server.php",{
method:"post",
body:params1,
headers:{"Content-Type":"application/x-www-form-urlencoded"}
}).then()

//内容类型为:application/x-www-form-urlencoded


3、发送json字符串

fetch("server.php",{
method:"post",
body:JSON.stringify({myname:"wswh",age:18}),//还可以使用'{"myname":"wswh","age":18}' 
headers:{"Content-Type":"application/json"}
}).then(response=>{
  if(response.ok){
    response.text().then(text=>{
      alert(text);
    });
  }
});

//内容类型为:application/json


4、发送xml字符串

fetch("server.php",{
method:"post",
body:"<?xml version='1.0' encoding='utf-8' ?><group><name>wswh</name><age>18</age></group>",
headers:{"Content-Type":"application/xml"}
}).then(response=>{
  if(response.ok){
    response.text().then(text=>{
      alert(text);
    });
  }
});

//内容类型为:application/xml


5、发送FormData对象

form1=new FormData(document.getElementById("form1"));  //或form1=new FormData();
form1.append("myname","wswh");
form1.append("age",18);
form1.append("file1",document.getElementById("file1").files[0]);
fetch("server.php",{
method:"post",
body:form1
}).then(response=>{
  if(response.ok){
    response.text().then(text=>{
      alert(text);
    });
  }
});
//不需要指定内容类型为:multipart/form-data


6、跨域访问

客户端配置

fetch("server.php",{
method:"get|post",
body:"",
mode:"cors"
}).then(response=>{
  if(response.ok){
    response.text().then(text=>{
      alert(text);
    });
  }
});


php实现跨域

header("access-control-allow-origin:*"); //*可以替换为具体的一个域名,如http://www.aa.com

header("access-control-allow-headers:origin,x-requested-with,content-type,accept");

header("access-control-allow-methods:get,post,options");


/*

若使用cookie,则需设置

header("access-control-allow-origin:https://webzone.cc");

header("access-control-allow-credentials:true");

*/


asp.net core实现跨域

Startup.cs

(1)在ConfigureServices()方法中加入:

services.AddCors();

(2)在Configure()方法中加入:

app.UseCors(builder=>builder.AllowAnyOrigin() //或WithOrigins()

.AllowAnyHeader() //或WithHeaders()

.AllowAnyMethod(); 

);


7、发送https请求

fetch直接支持https请求


上一篇:没有了

下一篇:js设置html属性和CSS属性

相关内容

热门资讯

弹性布局 布局的传统解决方案,基于盒状模型,依赖display属性+position属性+float属性。20...
js设置html属性和CSS属... js设置html属性:(1)添加属性对象名.属性名=值对象名.setAttribute("属性名",...
php swoole实现web... 1、使用http连接websocket(ws://)服务器端:
css实现强制不换行/自动换行... 强制不换行white-space:nowrap;自动换行word-wrap: break-word;...
关于css的text-inde... p{text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/}可加了...
html的data url和b... data urldata url的语法为:data:[][;base64],说明:(1)mediat...
php的安装与配置 一、linux(centos)1、nginx的安装与配置新建文件/etc/yum.repos.d/n...
自定义复选框样式 input[type="checkbox"] {appearance:none;-webkit-ap...
fetch方式发送请求 1、以get方式发送查询字符串fetch("server.php?查询字符串"[,{method:"...
css实现内容裁剪 1、实现单行内容裁剪,后跟省略号overflow:hidden;text-overflow:elli...