我正在帮助一位 friend 完成一个项目，该项目需要单独使用 HTML。我写前端的时候只用React写过，所以一直不懂纯HTML和Javascript之间的交互。现在我们有一个 sign up 表单，提交时需要向后端发出请求。该请求写在一个单独的文件中，我无法在提交表单时调用该文件。
HTML 文件:
<head>
<script src="./build/createUser.js"></script>
</head>
...
<form onsubmit="createUser()">
<input>
<button type="submit">Sign Up</button>在 browserify 构建之前的 JS 文件:
const serviceRequest = require('../../packages/serviceRequest');
module.exports = function createUser (options, cb) {
serviceRequest({
method: 'POST',
uri: '/user/create',
body: {
email: options.email,
password: options.password,
studentName: options.name
}
}, function (err, resp, body) {
if (err) {
console.log(err);
cb(err);
}
if (resp.statusCode >= 400) {
console.log('Unexpected response from create user endpoint');
console.log(resp.statusCode);
console.log(body);
cb('Unexpected Response');
}
cb(null, body);
});
};最佳答案
(我假设)您遇到的问题是您管理导出的方式意味着您的表单无法引用您的函数 onSubmit。您在编译项目时没有遇到问题吗？
我有两种选择。
(ONE) 绑定(bind)一个事件监听器(cleaner)
import serviceRequest from '../../packages/serviceRequest';
const createUser = (event, options) => {
event.preventDefault(); // Prevent default action of form
// serviceRequest() // Perform Logic
};
document.querySelector('form').addEventListener(createUser); // Or add a more specific selector
(两个)将您的函数添加到全局范围。
const createUser = (event, options) => {};
window.createUser = createUser;
如果您构建管道只是连接所有 javascript，您的 const 将被全局声明，但 browserify/babel 会将所有内容包装在一个闭包中。
希望对您有所帮助!
关于javascript - 导入 JS 模块调用 HTML 表单提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53072391/