amp 表单未提交表单数据答案

【问题标题】：amp form not submitting form dataamp 表单未提交表单数据
【发布时间】：2020-12-25 15:17:47
【问题描述】：

我有一个表单的用例，它具有从后端读取 json 的自动完成功能，以及从状态读取的表单内的一组输入字段。我正在尝试使页面按如下方式工作： 1-用户在自动完成中点击 2-用户输入文本 3-用户选择项目 4-单击后，整个表单将提交到后端 5- 用户被重定向到相应的页面

这是我当前的放大器代码：

                                    <form
                                            className="amp-search-areas-form"
                                            method="post"
                                            // action-xhr={`${hostName}/api/areas`}
                                            action-xhr="https://url/api/areas"
                                            target="_top"
                                            id="searchform"
                                            dir="rtl"
                                        >
                                            <div
                                                style={{
                                                    fontSize: 'large',
                                                    fontWeight: '600',
                                                    cursor: 'pointer',
                                                    paddingBottom: '10px',
                                                    textAlign: 'right',
                                                }}
                                            >
enter area name
                                            </div>
                                            <amp-autocomplete
                                                filter="substring"
                                                filter-value="name"
                                                // src={`${hostName}/api/areas`}
                                                src="https://url/api/areas"
                                                on="select:AMP.setState({ defaultState: { area: event.value }}), searchform.submit"
                                                query="name"
                                                submit-on-enter="true"
                                                highlight-user-entry="true"
                                                items="items"
                                                // on="change:searchform.submit" //triggers submit on select
                                                // on="tap:search-lightbox.close,AMP.setState({ fullScreenLightBox: ['banner-search-panel'] })" //should close on change
                                            >
                                                <input
                                                    dir="rtl"
                                                    type="search"
                                                    name="selectedArea"
                                                    role="areasearch"
                                                    tabIndex="3"
                                                    className="amp-search-areas-input"
                                                    placeholder="placeholder"
                                                />
                                                <AmpMustache
                                                    template={`
                                                            <div data-value="{{name}}">
                                                                <div>{{ name }}</div>
                                                            </div>`}
                                                />
                                            </amp-autocomplete>
                                            <input
                                                name="typeField"
                                                type="text"
                                                // hidden
                                                data-amp-bind-value="defaultState.type"
                                            ></input>
                                            <input
                                                name="catField"
                                                type="text"
                                                // hidden
                                                data-amp-bind-value="defaultState.cat"
                                            ></input>
                                            <input
                                                name="areaField"
                                                type="text"
                                                // hidden
                                                data-amp-bind-value="defaultState.area"
                                            ></input>
                                        </form>

当然，我已经在页面上方导入了所有必需的 amp 组件，例如表单、绑定、自动完成、小胡子等。

这是我的后端代码：

exports.createSearchRedirect = async (req, res) => {
    try {
        console.log("exports.createSearchRedirect -> req.params", req.params)
        console.log("exports.createSearchRedirect -> req.query", req.query)
        console.log("exports.createSearchRedirect -> req.body", req.body)
        let generatedUrl = '';
        res.set(
            'AMP-Redirect-To',
            encodeURI('https://url/search/' + generatedUrl)
        );
        res.json(true);
    } catch (error) {
        console.log('exports.createSearchRedirect -> error', error);
    }
};

我的快速配置：

server.use(bodyParser.urlencoded({ extended: true }));
  server.use(bodyParser.json());

【问题讨论】：

标签： reactjs express next.js amp-html

【解决方案1】：

好的，我已经通过将默认编码类型更改为 application/x-www-form-urlencoded 来解决它

所以我的表单现在看起来像这样：

 <form
      className="amp-search-areas-form"
     method="post"
    action-xhr="url/api/areas"
     target="_top"
     id="searchform"
     dir="rtl"
     encType="application/x-www-form-urlencoded"> // this line here 
        .
        .
        .
        etc
  </form>

【讨论】：