JS请求数据(GET POST)超详细

最新推荐文章于 2024-10-01 18:19:52 发布

文阳兄

最新推荐文章于 2024-10-01 18:19:52 发布

阅读量9.1k

点赞数 3

文章标签： ajax php js

本文链接：https://blog.csdn.net/LaoYangSaid/article/details/106838828

版权

本文详细介绍了JS中的GET和POST请求。对于GET请求，讲解了如何在util文件夹中封装请求，并通过HTML调用执行，同时提供了PHP接口的创建步骤。而对于POST请求，文中提到了在HTML中如何写入并引入PHP文件进行操作。

摘要由CSDN通过智能技术生成

GET请求

最好创建一个文件夹util(工具函数可重复使用的意思)
把get与post的请求单独放在这里面
后缀名.js

function addbook(){
   
 let addbtn=document.querySelector(".add button");
 let bookName=document.querySelector(".add .bookName");
 let prive=document.querySelector(".add .prive");
 let auto=document.querySelector(".add .auto");
 addbtn.οnclick=function(){
   
    // 获取值
     let bookNameval=bookName.value,
     priveval=prive.value,
     autoval=auto.value;
    //判断用户的输入是否正确
    if( bookNameval.length == 0 || priveval.length == 0 ||  autoval.length == 0){
   
    alert("该用户不合法")
    return;
    }
    // /^[\u4e00-\u9fa5a-z\d_]{
   4,10}$/.test
    // 书名在4-10个数字 用正则来表示
    if(!/^[\u4e00-\u9fa5a-z\d_]{
   4,10}$/.test(bookNameval)){
   
        alert("书名长度不合法")
        return;
    }
    // 发起ajax请求
    let xhr=new XMLHttpRequest();
    // 拼接所需要的的值
    // 所要拼接的值 + 里面填获取值的参数+ "&或者的意思"  最后拼接的直接+获取值的参数
    xhr.open("get","../api/addbook.php ?bookName=" +bookNameval+ "&price=" + priveval+ "&auto=" + autoval,true);
    xhr.send()
    xhr.onreadystatechange=function(){
   
        // 
        if(xhr.readyState == 4 && xhr.readyState ==200){
   
            // 这个是转化为字符串的形式
            let data=JSON.parse(xhr.responseText);
            console.log(data)
        }
    } 
}
}

常规写法
单独在一个文件进行封装后缀名.js
封装是在JS里面完成的要在HTML里面调用

// 发起ajax的请求用get方法
// 有3个参数
function sendajax(type,url,callback){
   
  let xhr=new XMLHttpRequest();
  // 拼接所需要的的值
  // 所要拼接的值 + 里面填获取值的参数+ "&或者的意思"  最后拼接的直接+获取值的参数
  xhr.open("type",url,true);
  xhr.send()
  xhr.onreadystatechange&