Javascript

Question

我有一个显示餐厅评论的页面，每条评论上都有一个赞按钮。每个按钮都在一个表单标签内，该标签隐藏了评论 ID 和用户 ID 的输入字段。问题是当我提交表单时，该页面上某个表单标签内外的所有内容都被提交到后端，我不知道更新数据库和前端的评论是什么。有什么办法可以只在表单标签内发送数据吗？谢谢。

表单标签，每条评论都会有这样一个表单

<form style="padding-top: 5px;" onsubmit="ajax_helpful_vote()">
    <input type="hidden" name="user_id" value="<%= user._id %>">
    <input type="hidden" name=<%= review._id %> value="<%= review._id %>">
    <button type="submit" class="btn btn-primary" id=<%= review._id %>>
       <span class="glyphicon glyphicon-thumbs-up"></span> Helpful
    </button>
</form>

ajax函数向服务器发送数据

function ajax_helpful_vote(form_id) {
    event.preventDefault();
    var formArray= $("#"+form_id).serializeArray();
    var data={};
    for (var index in formArray){
        data[formArray[index].name]= formArray[index].value;
    }

    $.ajax({
        url: '/helpful_vote' ,
        data: data,
        dataType: 'json',
        type: 'POST',
        success: function (dataR) {
            // disable helpful button
            document.getElementById(dataR.liked_review_id.toString()).disabled = true;
            // update number of votes
            $('#' + dataR.liked_review_id.toString() + "-text").prepend("You and ");
        },
        error: function (xhr, status, error) {
            console.log('Error: ' + error.message);
        }
    });
}

我试图给表单一个 name/id 并在 ajax 函数中，使用 name/id 获取该表单的数据，但它将我重定向到一个参数为输入字段并且不向后端发送任何数据。这意味着永远不会触发 ajax 函数，因此它会使用默认的 get 方法重新加载页面。

<% }else{
var text_id = review._id + "-text";
var form_id = review._id + "-form";
 %>
 <p style="color: green; padding-top: 5px" id=<%= text_id %>><%= review.liked_by.length %> people find this review helpful</p>
 <form id="<%=form_id%>" style="padding-top: 5px;" onsubmit="ajax_helpful_vote(<%=form_id.toString()%>)">
   <input type="hidden" name="user_id" value="<%= user._id %>">
   <input type="hidden" name=<%= review._id %> value="<%= review._id %>">
   <button type="submit" class="btn btn-primary" id=<%= review._id %>>
      <span class="glyphicon glyphicon-thumbs-up"></span> Helpful
   </button>
 </form>

呈现的表单标签

Answer 1

尝试为表单设置一个 id 然后 var formArray= $("form#some_id").serializeArray();

演示其工作原理：

function ajax_helpful_vote(event) {
    event.preventDefault();
    var formArray= $("form").serializeArray();
    console.log(formArray)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="outside" value="outside"></input>
<form id="myForm" style="padding-top: 5px;" onsubmit="ajax_helpful_vote(event)">
    <input type="hidden" name="user_id" value="user_test"/>
    <input type="hidden" name=name1"/>
    <button type="submit" class="btn btn-primary"
       <span class="glyphicon glyphicon-thumbs-up"></span> Helpful
    </button>
</form>

Answer 2

表单立即提交。这就是 AJAX 调用未被触发的原因。您应该首先阻止表单提交。由于您使用的是 jQuery，因此有一个简单的方法。

从表单的 HTML 中删除 onsubmit 处理程序，并使用 jQuery 的事件处理程序绑定它：

$('form').submit(function(e) {
  e.preventDefault();
  ajax_helpful_vote();
})

function ajax_helpful_vote() {
  ...
}

此外，从函数 ajax_helpful_vote 中删除最后一行 event.preventDefault();，这将引发错误，因为那里不会定义 event。

Answer 3

我明白了，所以问题不在于函数，而在于如何将 form-id 传递给函数。我应该 onsubmit="ajax_helpful_vote('<%=form_id.toString()%>')" 而不是 onsubmit="ajax_helpful_vote(<%=form_id.toString()%>)"。它应该是单引号而不是双引号。

Javascript - 排除特定表单标签之外的所有内容

Javascript - exclude everything outside a certain form tag

forms

ajax

submit

ejs