javascript - jQuery:循环注释 div 并获取字段值

Question

我正在尝试通过ajax提交用户评论，所以我正在尝试循环<div class="comments-fields">获取我需要的 2 个字段的值。

到目前为止，我收到的只是这个错误，就好像我没有填写评论文本区域一样。

SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'comment' cannot be null (SQL: insert into comments (user_id, comment, parent_id, parents, updated_at, created_at) values (1, , , 0, 2015-10-17 00:57:59, 2015-10-17 00:57:59))

和console.log(formData)给出类似这样的东西。

formData {}
__proto__: FormData
append: append()
constructor: FormData()
__proto__: Object

我怎样才能实现这个目标？如果有更好的方法请提出。

HTML

 <div class="comment-fields">
     <div class="commenter-comment">
        <div class="form-group col-md-12">
            <textarea id="commenter_comment" name="commenter_comment" class="form-control comment-field" title="User's comment" placeholder="Comment Text"></textarea>

         </div>
     </div>

     <div class="commenter-name-email">
         <input type="hidden" id="commenter_parent" name="commenter_parent" class="commenter-parent" value="0">
      </div>

      <div class="commenter-captcha">
          <div class="col-md-3 text-right">
              <a href="javascript:void(0)" class="btn btn-info post-this-comment">Comment</a>
           </div>
       </div>

 </div>

Javascript

function commenter_fields(){
    return [
        'commenter_parent',
        'commenter_user_id',
        'commenter_comment'
    ];
}

$(document).on('click', 'a.post-this-comment', function(){
    var formData = new FormData();
    var arrayelem = commenter_fields();
    var elem;
    for(var i=0, size = arrayelem.length; i<size; i++){
        elem = arrayelem[i];
        formData.append(elem, $('#'+elem).val());
    }
    formData.append('per_page', $('.comments_per_page').val());
    var request = $.ajax({ // push question data to server
        type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url         : 'post_this_comment', // the url where we want to POST
        data        : formData, // our data object
        dataType    : 'json',
        processData : false,
        contentType : false
    });
    request.done(comment_done_handler);
    request.fail(comment_fail_handler); // fail promise callback
});

我正在使用 PhpStrom，单击 FormData()导致此文件

C:\Program Files (x86)\JetBrains\PhpStorm 9.0\plugins\JavaScriptLanguage\lib\JavaScriptLanguage.jar!\com\intellij\lang\javascript\index\predefined\HTML5.js

这是FormData

FormData.prototype.append = function(name,value) {};
FormData = {};

Answer 1

我建议使用 regular objects因为它们比 formData 更容易使用(在我看来)。

jQuery 文档在 ajax 帖子中声明了类型:PlainObject 或 String 或 Array 用于数据设置，这让我认为他们也喜欢对象。

因此，您的点击处理程序可以:

var form_data = {
    'per_page': $('.comments_per_page').val()
};

var arr = [
    'commenter_parent',
    'commenter_user_id',
    'commenter_comment'
];

for (var i in arr; i < arr.length; i++) {
    var elem = arr[i];
    form_data[elem] = $('#' + elem).val();
}

// console.log(form_data); // something like => Object {per_page: "some_value", commenter_parent: "some_value", commenter_user_id: "some_value", commenter_comment: "some_value"}

var request = $.ajax({
    type: 'POST',
    url: 'your_url_here',
    data: form_data,
    dataType: 'json'
});

request.done(comment_done_handler);
request.fail(comment_fail_handler);