ajax方式发送请求
创始人
2025-07-09 12:38:57
0

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

原生:

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
  if(xhr.readyState==4&&xhr.status==200){
    alert(xhr.responseText);  //xhr.responseText为服务器返回的文本;xhr.response为服务返回的数据,通过xhr.responseType设置数据类型,取值有text、json、blob、arraybuffer,要放在onreadystatechange外。
  }
};
xhr.open("get","server.php?myname=wswh&age=18");
xhr.send();


jQuery

$.ajax({
  type:"get", //可以直接把查询字符串附加到url后
  url:"server.php",
  data:"myname=wswh&age=18", //还可以用{myname:"wswh",age:18}(json对象)
  dataType:"html",  //服务器返回的数据类型,取值有text、html、xml、script、json、jsonp。
  success:function(res){
    alert(res);
  }
});


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

原生

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
  if(xhr.readyState==4&&xhr.status==200){
    alert(xhr.responseText);
  }
};
xhr.open("post","server.php");
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("myname=wswh&age=18");


jQuery

$.ajax({
  type:"post", 
  url:"server.php",
  data:"myname=wswh&age=18", //还可以用{myname:"wswh",age:18}(json对象)
  success:function(res){
    alert(res);
  }
});


3、发送json字符串

原生

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
  if(xhr.readyState==4&&xhr.status==200){
    alert(xhr.responseText);
  }
};
xhr.open("post","server.php");
xhr.send('{"myname":"wswh","age":18}'); //还可以用JSON.stringify({myname:"wswh",age:18})


jQuery(jQuery ajax发送json对象本质属于发送查询字符串)

$.ajax({
  type:"post",
  url:"server.php",
  data:'{"myname":"wswh","age":18}', //还可以用JSON.stringify({myname:"wswh",age:18})
  success:function(res){
    alert(res);
  }
});


4、发送xml字符串

原生

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
  if(xhr.readyState==4&&xhr.status==200){
    alert(xhr.responseText);
  }
};
xhr.open("post","server.php");
xhr.send('<?xml version="1.0" encoding="utf-8" ?><group><myname>wswh</myname><age>18</age></group>'); 


jQuery

$.ajax({
  type:"post",
  url:"server.php",
  data:'<?xml version="1.0" encoding="utf-8" ?><group><myname>wswh</myname><age>18</age></group>',
  success:function(res){
    alert(res);
  }
});


5、发送FormData对象

原生

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
  if(xhr.readyState==4&&xhr.status==200){
    alert(xhr.responseText);
  }
};
var form1=new FormData();  
//创建表单,html5以上支持
//也可以使用现有表单数据 var form1=new FormData(document.getElementById("form1"));
form1.append("myname","wswh");  //添加表单数据
var file1=document.getElementById("file1").files[0];
form1.append("file1",file1);  //添加文件
xhr.open("post","server.php",true);
xhr.send(form1);  


jQuery

$.ajax({
  type:"post",
  url:"server.php",
  data:new FormData(document.getElementById("form1")),
  success:function(res){
    alert(res);
  },
  processData:false,  //告诉jQuery不要去处理发送的数据
  contentType:false  //告诉jQuery不要去设置Content-Type请求头
});


6、跨域访问

跨域访问主要在服务器端配置。


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");


asp.net core实现跨域

Startup.cs

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

services.AddCors();

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

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

.AllowAnyHeader() //或WithHeaders()

.AllowAnyMethod(); 

);


7、发送https请求

ajax直接支持https请求。


相关内容

热门资讯

弹性布局 布局的传统解决方案,基于盒状模型,依赖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...