Question

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

表单标记，每个评论都有一个这样的表单

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

我试图给表单一个名称/ id，并在ajax函数中，使用名称/ 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();

演示如何运作：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

function ajax_helpful_vote() {
  ...
}

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

Answer 3

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

Javascript - 排除某个表单标记之外的所有内容

3 个答案: