Question

我正在帮助一个朋友进行一个项目，该项目仅需要使用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>

JS文件在被browserify构建之前：

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);
	});
};

Answer 1

（我假设）您遇到的问题是，管理出口的方式意味着您的表单无法引用函数onSubmit。您在编译项目时没有问题吗？

我有两个选择给你。

（一个）绑定事件监听器（清理器）

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会将所有内容包装在一个闭包中。

希望有帮助！

导入要在HTML表单上提交的JS模块

1 个答案: