我正在尝试构建一个表单提交处理程序,用于提交无JS表单。但是API无法接收html表单发送的数据。我正在使用documentation。
js文件包含一个名为post的导出异步函数,该函数接收请求参数并将其记录到控制台,然后返回一个新的Response对象,该对象的请求参数字符串化为JSON,状态为200。
index.astro文件包含一个HTML表单,该表单的操作为/api/signin. json,方法为post,它有两个输入字段,一个是text类型,名称为text,值为test,另一个是submit类型。
表单提交后,终端中的输出显示了记录到控制台的请求对象。但是,浏览器中的输出显示了一个具有多个属性的JSON对象,但这些属性都不包含表单中提交的数据。目前尚不清楚API为什么没有接收到表单中的数据。可能是表单本身有问题。post函数处理数据的方式,或者其他一些东西。
在Astro JS目录中,我的文件位于
- /pages/signin.json.js
1./页/索引.天文
代码//登录. json. js
export async function post({request}) {
console.log(request)
return new Response(JSON.stringify(request), {
status: 200,
});
}
//索引.天文
---
---
<form action="/api/signin.json" method="post" >
<input type='text' name='text' value='test' />
<input type="submit" />
</form>
提交后输出
终端
Request {
size: 0,
follow: 20,
compress: true,
counter: 0,
agent: undefined,
highWaterMark: 16384,
insecureHTTPParser: false,
[Symbol(Body internals)]: {
body: <Buffer 74 65 78 74 3d 61 73 61>,
stream: Readable {
_readableState: [ReadableState],
_read: [Function: read],
_events: [Object: null prototype] {},
_eventsCount: 0,
_maxListeners: undefined,
[Symbol(kCapture)]: false
},
boundary: null,
disturbed: false,
error: null
},
[Symbol(Request internals)]: {
method: 'POST',
redirect: 'follow',
headers: {
accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'en-US,en',
'cache-control': 'max-age=0',
connection: 'keep-alive',
'content-length': '8',
'content-type': 'application/x-www-form-urlencoded',
cookie: 'io=NH8tzNimTmy0AtvFAAAA; asasa=asaa',
host: 'localhost:3000',
origin: 'http://localhost:3000',
referer: 'http://localhost:3000/login',
'sec-fetch-dest': 'document',
'sec-fetch-mode': 'navigate',
'sec-fetch-site': 'same-origin',
'sec-fetch-user': '?1',
'sec-gpc': '1',
'upgrade-insecure-requests': '1',
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36'
},
parsedURL: URL {
href: 'http://localhost:3000/api/signin.json',
origin: 'http://localhost:3000',
protocol: 'http:',
username: '',
password: '',
host: 'localhost:3000',
hostname: 'localhost',
port: '3000',
pathname: '/api/signin.json',
search: '',
searchParams: URLSearchParams {},
hash: ''
},
signal: null,
referrer: undefined,
referrerPolicy: ''
},
[Symbol(astro.clientAddress)]: '::1'
}
浏览器
{
"size": 0,
"follow": 20,
"compress": true,
"counter": 0,
"highWaterMark": 16384,
"insecureHTTPParser": false
}
我验证了表单操作和方法是正确的,并且与预期的端点和HTTP predicate 匹配。在本例中,表单操作是/api/signin. json,方法是post,根据提供的代码,这似乎是正确的。
这是我配置文件//astro.config.mjs
import { defineConfig } from 'astro/config';
import netlify from "@astrojs/netlify/functions";
import svelte from "@astrojs/svelte";
// https://astro.build/config
export default defineConfig({
output: "server",
adapter: netlify(),
integrations: [svelte()]
});
1条答案
按热度按时间iih3973s1#
下面是a way to handle forms:
现在是端点