Question

我所处的情况类似于这个问题;如果您是某个社交媒体网站上的开发人员，并且您必须实现用户喜欢/喜欢某些内容而无需重新加载页面的能力，您将如何做到这一点。我正在使用Node.js，Express和Handlebars构建应用程序。我已经到了一个我不知道要走哪条路的地步。这是我在的地方：

      <form method="POST" action="/favoriteCreator">
              <input type="submit" name="{{this.id}}" value="{{this.fname}} {{this.lname}}">
            </form>

基本上发生的事情是，对于每个人，使用提交类型的按钮创建表单。从假设的角度来看，可能有一百万种形式，有一百万个按钮。在这一点上，我想要做的就是这样做，以便在提交表单时，它会将创建者添加为最喜欢的创建者＆＃34;到我的数据库。我决定只是因为用户可能禁用JS而制作表单。当用户收藏某人时，我不希望它重新加载页面，因此我尝试使用AJAX。

<script>

$('#theform').on('submit', function (event) {
//alert('Hi');
event.preventDefault();
var data = {
  creatorname: this.name,
};

$.ajax({
  url: '/something',
  data: data,
  method: 'POST'
})

我有一个问题，一方面，表单没有id或名称。我知道不允许表单具有相同的ID，但如果我使用相同的名称，我觉得可能会发生不好的事情。此外，即使我设法超越了这个方面，我也不知道如何得到“{name = {{this.id}}＆＃39;属性。现在我把它作为this.name，但我认为这不会完全诚实。正如你所看到的，对我而言，这真的是一件事。我之前从未真正使用过AJAX，所以这一切对我来说都很陌生。我不想找到一些勉强工作的方法，然后不得不回来重做所有内容，所以任何帮助都会受到赞赏。

谢谢

Answer 1

我有一个问题，一方面，表单没有ID或名称。
- 表单可以具有相同的类名。并且您可以将类名作为参数传递。
我知道不允许表单具有相同的ID，但如果我使用相同的名称，我觉得可能会发生不好的事情。此外，即使我设法超越了这个方面，我也不知道如何得到“{name = {{this.id}}＆＃39;属性。
- 您可以尝试使用{{this.name}}
现在我把它作为this.name，但我认为这不会完全诚实。
- 为什么你认为它不起作用？这很好。

Answer 2

表单不适合进行ajax操作。只需常规按钮即可，但是你所做的停止传播是一种好方法。

要解决您的ID方案，请通过课程
要使用html data attribute

试试这个

$('.formClass').on('submit', function(event) {

  event.preventDefault();
  var data = {
    user: $(event.target[0]).data('user')
  }

  $('.optput').text(data.user)

  $.ajax({
    url: 'https://reqres.in/api/users',
    data: data,
    method: 'POST'
  }).done(function(d) {
    console.log(d)
  })

});

body {
  background: #20262E;
}

.forms {
  display: flex
}

.formClass {
  margin: 10px;
}

#banner-message {
  color: #fff;
  margin-top: 11px;
}

.button {
  background: #0084ff;
  border-radius: 5px;
  font-size: 15px;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='forms'>
  <form class='formClass' name='testform'>
    <input type='submit' data-user='user1' value='click me' class='button' />
  </form>
  <form class='formClass' name='testform'>
    <input type='submit' data-user='user2' value='click me' class='button' />
  </form>
  <form class='formClass' name='testform'>
    <input type='submit' data-user='user3' value='click me' class='button' />
  </form>
  <label id='banner-message' class='optput'></label>
</div>

具有动态创建按钮的AJAX和Node.js

2 个答案: