AJAX基本操作(二)——post请求以及设置请求头信息

最新推荐文章于 2023-03-29 11:22:34 发布

拾玥花开

最新推荐文章于 2023-03-29 11:22:34 发布

阅读量3.1k

点赞数 1

分类专栏： AJAX 文章标签： ajax http js

本文链接：https://blog.csdn.net/weixin_44691513/article/details/113620256

版权

AJAX 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

- - post请求:
  - 设置请求头信息

post请求:

后端代码:

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.post('/server', (request, response)=>{
    //设置响应
    response.setHeader('Access-Control-Allow-Origin', '*');
     //响应头
     response.setHeader('Access-Control-Allow-Headers', '*');
    response.send('HELLO AJAX POST');
});
app.all('/server', (request, response)=>{
    //设置响应
    response.setHeader('Access-Control-Allow-Origin', '*');
     //响应头
     response.setHeader('Access-Control-Allow-Headers', '*');
    response.send('HELLO AJAX POST');
});
//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000 端口监听中....");
});

这里补充一个知识点：如何在post请求中添加参数：
在发送的步骤中写成如下的形式：
send函数中写上需要添加的参数即可。

   xhr.send('a==100&b=100&c=100')

设置请求头信息

前端代码：

  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//设置请求体类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result=document.getElementById('result')
        result.addEventListener('mouseover',function(){
            //创建对象
           const xhr=new XMLHttpRequest()
           //初始化和设置url
           xhr.open('POST','http://127.0.0.1:8000/server')
           //设置请求头
           xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//设置请求体类型
           //发送
        //    xhr.send()
           xhr.send('a==100&b=100&c=100')
           xhr.onreadystatechange=function(){
               if(xhr.readyState==4){
                   if(xhr.status>=200 && xhr.status<=300){
                       //处理服务端返回的信息
                       result.innerHTML=xhr.response
                   }
               }
           }
        })
    </script>
</body>
</html>

若在后端出现报错是因为我们还会发送一个option请求，
而我们无法识别option请求。
在这里插入图片描述

可将后端代码的post改为all 使得可以接受任意的请求

app.post('/server', (request, response)=>{
    //设置响应
    response.setHeader('Access-Control-Allow-Origin', '*');
     //响应头
     response.setHeader('Access-Control-Allow-Headers', '*');
    response.send('HELLO AJAX POST');
});

拾玥花开

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
AJAX基本操作(二)——post请求以及设置请求头信息

文章目录post请求:设置请求头信息post请求:后端代码://1. 引入expressconst express = require('express');//2. 创建应用对象const app = express();//3. 创建路由规则// request 是对请求报文的封装// response 是对响应报文的封装app.post('/server', (request, response)=>{ //设置响应 response.setHeader(
复制链接

扫一扫