Ajax发送Post请求

最新推荐文章于 2023-02-27 10:44:34 发布

野生小米椒

最新推荐文章于 2023-02-27 10:44:34 发布

阅读量3.3k

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/x1037490413/article/details/118363782

版权

Ajax 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

注意：当修改js代码后，要重启一下服务 node server.js或者直接右键Run Code

一直报这样的错，端口号被占用了
在这里插入图片描述解决办法：
cmd中输入netstat -ano查询进程
找到占用端口号8080的进程PID号10016
再管理员模式下taskkill /PID 10016
不行的话强制终止这个进程 taskkill /PID 10016 /F

server.js

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2021-06-09 15:59:55
 * @LastEditors: Seven
 * @LastEditTime: 2021-06-30 15:29:23
 */
const express= require('express');
const app=express();
//当浏览器url路径是/server，执行{}里的回调函数，并由response做出响应
//注意/server前没有点 ,之前一直报错
//发送get请求
app.get('/server',(request,response)=>{
  //设置响应头,设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //设置响应体
     response.send('Hellow Ajax');
});
//发送post请求
app.post("/server", (request, response) => {
  //设置响应头,设置允许跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  //设置响应体
  response.send("Hellow Ajax POST");
});
app.listen(8000,()=>{
  console.log("服务已经启动 8000");
})

POST.html

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2021-06-09 15:59:48
 * @LastEditors: Seven
 * @LastEditTime: 2021-06-30 17:02:30
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: 1px solid salmon;
      }
    </style>
  </head>
  <body>
    <div id="result"></div>
    <script> 
       //获取Button元素
       var result=document.getElementById("result")
       //绑定事件
      result.addEventListener("mouseover",function(){
       //1.创建对象
        const xhr=new XMLHttpRequest()
         //2.初始化，设置请求方法和url  用？和&可传递多个参数，参数可以在控制台的Network和Headers里的Query String Parameters查看
        xhr.open("POST","http://127.0.0.1:8000/server")
         //3.发送
         //POST参数在send方法里写
         //xhr.send('a=100&b=200&c=300')
         //或者别的形式
         xhr.send('a:100&b:200&c:300')
         //4.事件绑定，处理服务端返回的结果
         /*  on when 当...时候    
         readyState是xhr对象中的属性，表示状态0 1 2 3 4
         0是未初始化  1是open方法调用完  2是send方法调用完   3是服务器返回部分结果  4是服务器返回全部结果
         */
         xhr.onreadystatechange=function(){
           if(xhr.readyState===4){
             /*判断响应状态码 200 404 403 401 500
            2xx都是成功
            */
             if(xhr.status>=200&&xhr.status<=300){
               result.innerHTML=xhr.response
             }
           }
         }
            
      })
         
           
    </script>
  </body>
</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax发送Post请求

注意：当修改js代码后，要重启一下服务 node server.js或者直接右键Run Code一直报这样的错，端口号被占用了解决办法：cmd中输入netstat -ano查询进程找到占用端口号8080的进程PID号10016再管理员模式下taskkill /PID 10016不行的话强制终止这个进程 taskkill /PID 10016 /Fserver.js/* * @Description: * @Version: 2.0 * @Autor: Seven * @Date:
复制链接

扫一扫