html中的表单标签不发布/点击网站答案

【问题标题】：form tag in html not posting/hitting websitehtml中的表单标签不发布/点击网站
【发布时间】：2021-03-04 10:23:27
【问题描述】：

所以我想为我和我的朋友创建一个链接缩短器在我们的小型服务中心使用但我有一个小问题。我设置了一个快速服务器来完成这项工作，同时创建了一个文件上传器我用邮递员来测试。两者都可以正常工作，但这就是我遇到问题的地方。每当我使用下面的 sn-p 尝试将数据发送到“api”时它甚至没有发布/触摸网站是的，我调试过它是否触摸过 只有当我使用表单发布/获取方法时，代码才不起作用

HTML代码sn-p

 <form method="POST" action="/shorten" enctype="application/x-www-form-urlencoded">
                <label for="fUrl" class="sronly">URL</label>
                <input class="input"
                    required
                    placeholder="URL"
                    type="url"
                    name="fUrl"
                    id="fUrl"
                />
    <button type="submit">Shrink This!</button>
    </form>

我尝试了很多东西，我不知道是因为我用 EJS 渲染它还是什么我用 HTML 文件单独测试了它，但无济于事如果这篇文章中有什么我错过了，请告诉我！

【问题讨论】：

标签： html node.js express ejs

【解决方案1】：

客户端和服务器之间的映射似乎存在一些问题。尝试将 action 值更改为您的 API 端点。

 <form method="POST" action="http://myserver.com/shorten" enctype="application/x-www-form-urlencoded">
            <label for="fUrl" class="sronly">URL</label>
            <input class="input"
                required
                placeholder="URL"
                type="url"
                name="fUrl"
                id="fUrl"
            />
<button type="submit">Shrink This!</button>
</form>

【讨论】：

可悲的是我也试过这个，我不知道它是否是本地主机上的问题，但它不应该是

【解决方案2】：

这是浏览器有点太快/太慢的问题

修复在这里

// thanks to Vikasdeep Singh for this oddly specific url regex test
function isValidURL(string) {
    var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
    return (res !== null)
};

var el = document.getElementById("yourButtonID");
el.addEventListener("click", avoidNSErrorWithFirefox, false); //Firefox

function avoidNSErrorWithFirefox() {
    ElementInterval = setInterval(function() {
        var url = document.getElementById("inputURL").value; // input tag
        if (isValidURL(url)) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://your-url.com/shorten", true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send(JSON.stringify({
                "url": url
            }));
        }
        clearInterval(ElementInterval);
    }, 0);
};

在我测试过的所有浏览器上都像魅力一样工作

edge chrome 歌剧火狐

希望我和我的朋友们的修复可以为您节省一些表单/快递问题的麻烦！

【讨论】：