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

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>

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

Answer 1

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

我有两种选择。

(ONE) 绑定一个事件监听器(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

(TWO) 将您的函数添加到全局范围。

const createUser = (event, options) => {};
window.createUser = createUser;

如果你正在构建管道只是连接所有你的 javascript 你的 const 将被全局声明但是 browserify / babel 会将所有东西包装在一个闭包中。

希望对您有所帮助！

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

Importing JS Module to be called On HTML Form Submit

html

javascript

browserify