Javascript 有没有一种方法可以将JSON发送到php处理器而不使用<；表格>；？

我有一张一页的表格，我想在表格的开头收集联系信息，而不提交表格。我正试图用javascript实现这一点

HTML:

---

所有提交的内容目前都被发送到一个电子邮件地址，但“POST”：[]为空。我试过上面的代码。变量存储在按钮单击上，并向/submit contact.php发送帖子。

是的，可以将JSON发送到基于php的后端，而无需HTML页面中的

元素。这可以通过JavaScript实现

看到您正在使用JQuery，可以使用内置方法而不是使用

XMLHttpRequest

对象来简化代码

这些变化可能如下所示：

$（函数（）{
$（“#contactButton”）。单击（函数（）{
first_name=$（“#firstName”）.val（）；
姓氏=$（“#姓氏”）.val（）；
用户电子邮件=$（“#用户电子邮件”）.val（）；
用户电话=$（“#用户电话”）.val（）；
$.ajax（”https://apply.1hallmark.test/submit-contact.php",
{
方法：“POST”，
内容：{
“名字”：名字，
“姓氏”：姓氏，
“用户电子邮件”：用户电子邮件，
“用户电话”：用户电话
}
})
.完成（功能（数据）{
console.log（'请求-响应：'，数据）
})
.失败（功能（错误）{
console.log（'Error:'，err）
});
});
});

名字


姓氏


用户电子邮件


用户电话


ContactButton
是的，可以将JSON发送到基于PHP的后端，而无需HTML页面中的
元素。这可以通过JavaScript实现

看到您正在使用JQuery，可以使用内置方法而不是使用
XMLHttpRequest
对象来简化代码

这些变化可能如下所示：


$（函数（）{
$（“#contactButton”）。单击（函数（）{
first_name=$（“#firstName”）.val（）；
姓氏=$（“#姓氏”）.val（）；
用户电子邮件=$（“#用户电子邮件”）.val（）；
用户电话=$（“#用户电话”）.val（）；
$.ajax（”https://apply.1hallmark.test/submit-contact.php",
{
方法：“POST”，
内容：{
“名字”：名字，
“姓氏”：姓氏，
“用户电子邮件”：用户电子邮件，
“用户电话”：用户电话
}
})
.完成（功能（数据）{
console.log（'请求-响应：'，数据）
})
.失败（功能（错误）{
console.log（'Error:'，err）
});
});
});

名字


姓氏


用户电子邮件


用户电话


ContactButton
您好，您可以使用向服务器发送请求

例如：

   document.getElementById('contactButton').onclick = function(){
    var url = 'yourURL.php';
    var data = {
                first_name : $("#firstName").val(),
                last_name : $("#lastName").val(),
                user_email : $("#userEmail").val(),
                user_phone : $("#userPhone").val()
    };

    fetch(url, {
      method: 'POST',
      body: JSON.stringify(data), // data can be `string` or {object}!
      headers:{
        'Content-Type': 'application/json'
      }
    }).then(res => res.json())
    .catch(error => console.error('Error:', error))
    .then(response => console.log('Success:', response))

    }

希望对您有所帮助。您好，您可以使用向服务器发送请求

例如：

   document.getElementById('contactButton').onclick = function(){
    var url = 'yourURL.php';
    var data = {
                first_name : $("#firstName").val(),
                last_name : $("#lastName").val(),
                user_email : $("#userEmail").val(),
                user_phone : $("#userPhone").val()
    };

    fetch(url, {
      method: 'POST',
      body: JSON.stringify(data), // data can be `string` or {object}!
      headers:{
        'Content-Type': 'application/json'
      }
    }).then(res => res.json())
    .catch(error => console.error('Error:', error))
    .then(response => console.log('Success:', response))

    }

希望对您有所帮助
$\u POST
不适用于编码为JSON的参数。如果参数是以
应用程序/x-www-form-urlencode
或
多部分/表单数据
格式发送的，PHP将仅将其放入
$\u POST

如果使用jQuery
$.ajax
函数或快捷方式
$.post
函数，它将正确编码

$(function(){
    $("#contactButton").click(function(){
        var first_name = $("#firstName").val();
        var last_name = $("#lastName").val();
        var user_email = $("#userEmail").val();
        var user_phone = $("#userPhone").val();
        $.post("https://apply.1hallmark.test/submit-contact.php", {
            "first_name": first_name,
            "last_name": last_name,
            "user_email": user_email,
            "user_phone": user_phone
        });
    });
});

如果要使用
fetch（）
，可以使用
$.param（）
对POST参数进行编码：

   $(function(){
        $("#contactButton").click(function(){
        var first_name = $("#firstName").val();
        var last_name = $("#lastName").val();
        var user_email = $("#userEmail").val();
        var user_phone = $("#userPhone").val();
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://apply.1hallmark.test/submit-contact.php", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send($.param({
                "first_name": first_name,
                "last_name": last_name,
                "user_email": user_email,
                "user_phone": user_phone
            }));
        });
    });

$\u POST
不适用于编码为JSON的参数。如果参数是以
应用程序/x-www-form-urlencode
或
多部分/表单数据
格式发送的，PHP将仅将其放入
$\u POST

如果使用jQuery
$.ajax
函数或快捷方式
$.post
函数，它将正确编码

$(function(){
    $("#contactButton").click(function(){
        var first_name = $("#firstName").val();
        var last_name = $("#lastName").val();
        var user_email = $("#userEmail").val();
        var user_phone = $("#userPhone").val();
        $.post("https://apply.1hallmark.test/submit-contact.php", {
            "first_name": first_name,
            "last_name": last_name,
            "user_email": user_email,
            "user_phone": user_phone
        });
    });
});

如果要使用
fetch（）
，可以使用
$.param（）
对POST参数进行编码：

   $(function(){
        $("#contactButton").click(function(){
        var first_name = $("#firstName").val();
        var last_name = $("#lastName").val();
        var user_email = $("#userEmail").val();
        var user_phone = $("#userPhone").val();
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://apply.1hallmark.test/submit-contact.php", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send($.param({
                "first_name": first_name,
                "last_name": last_name,
                "user_email": user_email,
                "user_phone": user_phone
            }));
        });
    });

您可以执行
$。post（“https://apply.1hallmark.test/submit-contact.php“，{名字、姓氏、用户电子邮件、用户电话}，函数（回复）{console.log（回复）；}”而不是所有的
xhr
业务。jQuery应该负责其余的工作。您可以创建一个新的
FormData
对象，并手动
。设置（键，值）
对，其中键和值可以是任何内容。它们甚至不必来自HTML
input
元素。为什么要设置所有变量，如
first\u name
，但不使用它们并重复调用
.val（）
？Barmar，我最初是以
first\u name
的形式编写的，然后切换到
.val（）
在试图找出帖子为何为空时。您可以执行
$.POST（“https://apply.1hallmark.test/submit-contact.php“，{名字、姓氏、用户电子邮件、用户电话}，函数（回复）{console.log（回复）；}”而不是所有的
xhr
业务。jQuery应该负责其余的工作。您可以创建一个新的
FormData
对象，并手动
。设置（键，值）
对，其中键和值可以是任何内容。它们甚至不必来自HTML
input
元素。为什么要设置所有变量，如
first\u name
，但不使用它们并重复调用
.val（）
？Barmar，我最初是以
first\u name
的形式编写的，然后切换到
.val（）
在试图找出帖子为何为空时。如果它不能与XMLHttpRequest一起使用，为什么您认为它与Fetch一起使用会更好？Fetch更好，因为您可以处理错误，并且不需要使用jqueryIt可能更好，但它确实解决了他遇到的问题吗？你仍然像他一样使用jQuery。@Barmar你是对的，我只是复制了他的点击事件，这就是为什么我添加了vanilla js语句=）如果它不能与XMLHttpRequest一起工作，为什么你认为它能与Fetch一起工作更好？Fetch更好，因为你可以处理错误，而且你不需要使用jqueryIt可能更好，但这真的解决了他面临的问题吗？你仍然像他一样使用jQuery。@Barmar你说得对，我只是复制了他的点击事件，这就是我添加香草的原因