logo标签列表

使用纯JavaScript发送POST数据而无需表单

javascriptposthttpwebrequestxmlhttprequesthttp-post
303

有没有一种方法可以使用纯JavaScript（而非jQuery $.post()）发送POST方法的数据，而不需要表单且不刷新页面？也许是通过 httprequest 或其他方式实现的（只是目前找不到）？

4
XMLHttpRequest是答案...$.post在幕后使用相同的技术。 - Chandu
这个问题可能会对你有所帮助：[https://dev59.com/Arbna4cB1Zd3GeqPfLFE#58218057][1] [1]: https://dev59.com/Arbna4cB1Zd3GeqPfLFE#58218057 - Jorge del Campo Andrade
13个回答
4

以下是一个不错的函数，你（或其他人）可以在自己的代码中使用：

function post(url, data) {
    return new Promise((res, rej) => {
        let stringified = "";
        for (const [key, value] of Object.entries(data))
            stringified += `${stringified != '' ? '&' : ''}${key}=${value}`

        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4)
                if (xhr.status == 200)
                    res(xhr.responseText)
                else
                    rej({ code: xhr.status, text: xhr.responseText })
        }
        xhr.open("POST", url, true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(stringified);
    })
}
res 和 rej 未定义。 - Matt
@Matt，请澄清你的意思。你是指你遇到了一个错误吗？ - Oscar Knap
1
第2行定义了“res”和“rej”。 - Oscar Knap
res是做什么用的？如果我想将响应以JSON格式传递给一个函数，我应该把它放在这段代码的哪里？ - Nikhil VJ
如果你想让函数返回其他内容，请更改传递给res的内容。 - Oscar Knap
0

您也可以使用这个：https://github.com/floscodes/JS/blob/master/Requests.js

您可以轻松地发送一个http请求。只需使用：

HttpRequest("https://example.com", method="post", data="yourkey=yourdata");

就是这样！即使网站受到了CSRF保护，它也应该可以正常工作。

或者只需使用以下方式发送GET请求：

HttpRequest("https://example.com", method="get");
0
使用 jbezz 库中的此函数。
var makeHttpObject = function () {
  try {return new XMLHttpRequest();}
  catch (error) {}
  try {return new ActiveXObject("Msxml2.XMLHTTP");}
  catch (error) {}
  try {return new ActiveXObject("Microsoft.XMLHTTP");}
  catch (error) {}
  throw new Error("Could not create HTTP request object.");
}
function SendData(data){
    let type = (data.type ? data.type : "GET")
    let DataS = data.data;
    let url = data.url;
    let func = (data.success ? data.success : function(){})
    let funcE =(data.error ? data.error : function(){})
    let a_syne = (data.asyne ? data.asyne : false); 
    let u = null;
    try{u = new URLSearchParams(DataS).toString();}catch(e){u = Object.keys(DataS).map(function(k) {return encodeURIComponent(k) + '=' + encodeURIComponent(DataS[k])}).join('&')}
    if(type == "GET"){url +="?"+u}
    const xhttp =  makeHttpObject();
    xhttp.onload = function(){func(this.responseText)}
    xmlHttp.onreadystatechange = function() {if (xmlHttp.readyState == 4) 
    {if(xmlHttp.status !== 200){funcE(xmlHttp.statusText)}}}
    xhttp.open(type,url,a_syne);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(u);
}

使用这个来运行：
SendData({
    url:"YOUR_URL",
    asyne:true,
    type:"POST", // or GET
    data:{
        username:"ali",
        password:"mypass" // Your Data
    },
    success:function(Result){
        console.log(Result)
    },
    error:function(e){
        console.log("We Have Some Error")
    }
});

或者

下载 jbezz 并添加到你的页面中。

下载链接：github.com

使用：

$$.api({
        url:"YOUR_URL",
        asyne:true,
        type:"POST", // or GET
        data:{
            username:"ali",
            password:"mypass" // Your Data
        },
        success:function(Result){
            console.log(Result)
        },
        error:function(e){
            console.log("We Have Some Error")
        }
    });
@José 我会尽力的。 - Khaled Developer
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接