jQuery：在注釋div中循環並獲取字段值

Question

我試圖通過ajax提交用戶評論，所以試圖遍歷<div class="comments-fields">以獲取我需要的2個字段的值。

到目前為止，我得到的只是這個錯誤，好像我沒有填寫我的注釋文本區域。

SQLSTATE [23000]：違反完整性約束：1048列'comment'不能為空（SQL：插入comments （ user_id ， comment ， parent_id ， parents ， updated_at ， created_at ）的值（1 updated_at created_at 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

我建議使用常規對象，因為它們比formData更容易使用（我認為）。

jQuery文檔在ajax帖子中為數據設置指定了Type: PlainObject or String or 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);

Answer 2

一種更簡單的方法是在元素上使用數據屬性，並僅從像這樣的值構建數據字符串：

 $(document).on('click', 'a.post-this-comment', function () { var dataArray=[]; // array to temporarilly store our data $('#comment-fields').find('.commenter-field').each(function(i,e){ //loop through all of the fields we need values from, I gave them all the class `commenter-field` var $element =$(e); // cache the element var type=$element.data('comment-field-type'); // get the name of the data, stored as a data attribute var value=encodeURIComponent($element.val()); // get the value, you MUST encode the value, otherwise, you WILL run into issues at some point with illegal chars dataArray.push(type+'='+value); // combine the type and value separated by `=` }); var dataString=dataArray.join('&'); // join the array with `&` between each name/value pair 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.php', // the url where we want to POST, missing file extension here? data: dataString, // our data string dataType: 'json', // only if your code expects a json response from `post_this_comment.php` }); request.done(comment_done_handler); request.fail(comment_fail_handler); // fail promise callback }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="comment-fields"> <div class="commenter-comment"> <div class="form-group col-md-12"> <textarea data-comment-field-type="commenter_comment" class="form-control commenter-field" title="User's comment" placeholder="Comment Text">Some comment...</textarea> </div> </div> <div class="commenter-name-email"> <input type="hidden" data-comment-field-type="commenter_parent" class="commenter-field" value="some parrent"> <input type="hidden" data-comment-field-type="commenter_user_id" class="commenter-field" value="some UserId"> <input type="hidden" data-comment-field-type="per_page" class="commenter-field" value="some number of comments"> </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> 

在開發工具中檢查請求標頭會顯示正在發送的以下數據：