Question

我正在尝试将用户输入表单的信息（作业）保存到数据库，然后从该作业的数据库中返回相应的ID号。

我可以成功运行＆＃39;创建＆＃39;的卷曲脚本。终端中的方法。但是，当我在表格中输入我为用户设置的文字时，点击提交＆＃39;表单中的数据消失，并在localhost之后的斜杠后显示在浏览器中......就像这样（http://localhost:7165/?URL=why+doesnt+this+work）。我的控制台中没有出现任何问题，因此我认为宿舍中的数据是如何定位的。它可能不是针对性的，因为事件没有发生。

如何获取表单上输入的信息以保存到我的数据库并返回一个ID，就像我能够在终端中使用curl脚本一样？

这是我的api：

'use strict'
// Use strict affects what config.apiOrigin does.
const config = require('../config.js')
const store = require('../store')

const addJob = function (data) {
  return $.ajax({
    url: config.apiOrigin + '/jobs',
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    data
  })
}

module.exports = {
  addJob
}

这是我的events.js：

const getFormFields = require('../../../lib/get-form-fields.js')
const api = require('./api.js')
const ui = require('./ui.js')

const onAddJobSubmit = function (event) {
  event.preventDefault()
  const data = getFormFields(event.target)
  api.addJob(data)
    .then(ui.onAddJobSuccess)
    .catch(ui.onAddJobFailure)
}

const eventListeners = function () {
  $('#URLForm').on('click', '#submitURLButton', onAddJobSubmit)
}
module.exports = {
  eventListeners
}

这是我的ui.js：

const onAddJobSuccess = function (data) {
  $('#URLForm').html('id')
}

const onAddJobFailure = function () {
  $('#URLForm').text('Job not added')
}

module.exports = {
  onAddJobSuccess,
  onAddJobFailure
}

onAddJobSuccess中的

*我知道id不是显示刚刚保存在数据库中的作业ID的正确方法，但我仍然不确定如何定位ID。

这是我的HTML：

<body class="container-fluid">
      <h1>Job Queue</h1>
      <p>This app fetches HTML data from URLs and adds that HTML to a database. To begin a job, add a URL then click 'Submit'. </p>
      <div id="AddJob">
          <form id="URLForm">
              <div class="center">
                  <input name="URL" type="text" placeholder="URL" class="input-field">
                  <button id="submitURLButton">Submit</button>
              </div>
           </form>
           <div id="jobID">
               <div class="right">
                   <form id="returnID">
                   </form>
</body>

Answer 1

在表单上收听submit事件，而不是click并且不使用事件委派。

$('#URLForm').on('submit', onAddJobSubmit)

使用<button type='submit＆gt;

以表格形式定位信息

1 个答案: