Javascript：通过获取请求POST的问题

sqyvllje 于 2023-01-16 发布在 Java

关注(0)|答案(2)|浏览(144)

我尝试使用Fetch将一些JSON数据发布（就像POST的请求类型一样）到PHP后端页面，但是由于某种原因，PHP页面将POST读取为空。

- 表单标记**

<form action="add_to_mailchimp.php" method="POST">
        <input type="text" name="email" placeholder="Enter your email" />
        <button type="submit">Go</button>
      </form>

- Javascript：**

document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const payload = {
    // email: document.querySelector('[name="email"]').value,

    email: 'dpa@gmail.com', // hard code value just for example
  };
  console.log('about to submit %o', payload);
  fetch('add_to_mailchimp.php', {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((response) => {
      console.log(response);
      return response.json();
    })
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.log(error);
    });
});
});

- 菲律宾**

<?php
  print json_encode(array('postObj' => $_POST, 'reqType' => $_SERVER['REQUEST_METHOD'));
  die;
?>

在提交表单时，以下内容将写入控制台。

{postObj: [], reqType: "POST", [[Prototype]]: Object}

当我删除javascript并允许表单正常提交并将以下内容添加到PHP时：

print '<pre>';
    print_r($_POST);
    print '</pre>';

我得到：

Array
(
    [email] => dp@gail.com
)

其中dp@gmail.com是输入到文本字段中的任何值。过去一个小时我一直在撞墙，试图弄清楚这个问题，现在我真的没有主意了。有人能为我解释一下吗？谢谢!

JavaScript

来源：https://stackoverflow.com/questions/75123449/javascript-issues-with-post-request-via-fetch

2条答案

按热度按时间

ycl3bljg1#

将PHP更改为以下代码：

$json = file_get_contents('php://input');
print_r($json);

这允许您从请求正文读取原始数据

赞(0）回复(0）举报 2023-01-16

w8biq8rn2#

这是一个单页的工作演示，演示了如何实现所述目标。正如已经指出的，使用file_get_contents('php://input')是正确的，因为在将Content-Type指定为json时，您不再发送常规的www-urlencoded或form-data类型的请求
还添加了一小段代码来清除焦点上的输入元素，并在用户未能添加自己的电子邮件地址时进行恢复-非常基本，但使用正则表达式来检查任何输入的值或多或少是正确的电子邮件地址。服务器端的进一步检查应该使用filter_input或类似的来完成，以确保电子邮件在服务器接收时实际上是有效的。

<?php

    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        $json=json_encode(
            array(
                'postObj' => file_get_contents('php://input'),
                'reqType' => $_SERVER['REQUEST_METHOD']
            )
        );
        exit( $json );
    }
    
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Mailchimp</title>
    </head>
    <body>
        
    
        <form name='mailchimp' action='add_to_mailchimp.php' method='POST'>
          <input type='text' name='email' placeholder='Enter your email' value='dpa@gmail.com' />
          <button type='submit'>Go</button>
        </form>
        
        
        
        <script>
        
            const b=false;  // set as true to change url used by Fetch
            const d=document;
            const f=d.forms.mailchimp;
            const pttn=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            d.addEventListener('DOMContentLoaded', () => {

              // clear default value on focus
              f.email.addEventListener('focus',e=>{
                  e.target.value='';
              });
              
              // restore default value if left empty
              f.email.addEventListener('blur',e=>{
                  if( !e.target.value.match( pttn ))alert('Invalid email address');
                  if( e.target.value=='' )e.target.value=e.target.defaultValue;
              });
              
              // send ajax request
              f.addEventListener('submit', e=>{
                e.preventDefault();
                
                if( !f.email.value.match( pttn ) ) return
                    
                const payload = {
                    email:f.email.value
                };
                
                const args={
                    method:'POST',
                    mode:'cors',
                    body:JSON.stringify( payload ),
                    headers:{
                      'Content-Type':'application/json',
                    }
                };
                
                const callback=(r)=>{
                    console.log( r );
                };

                // Change the variable above to true to use Form Action as target url
                let url=b ? f.action : location.href;
                
                fetch( url, args )
                    .then(r=>r.json())
                    .then(callback)
                    .catch(console.log)
             
              });
            });
        </script>
    </body>
</html>

赞(0）回复(0）举报 2023-01-16

我来回答

Javascript：通过获取请求POST的问题

2条答案

相关问题

热门标签

最新问答