JQuery: 'Uncaught TypeError: Gọi bất hợp pháp' theo yêu cầu ajax khi tham số dữ liệu là mảng

Question

Tôi có hai phần tử chọn, A và B: khi tùy chọn đã chọn A thay đổi, các tùy chọn của B phải được cập nhật tương ứng. Mỗi phần tử trong A hàm ý nhiều phần tử trong B, đó là mối quan hệ một-nhiều (A chứa các quốc gia, B nên chứa các thành phố nằm trong quốc gia cụ thể).

Chức năng do_ajax nên chạy theo yêu cầu không đồng bộ:

function do_ajax(elem, mydata, filename) 
{ 
    $.ajax({ 
     url: filename, 
     context: elem, 
     data: mydata, 
     datatype: "html", 
     success: function (data, textStatus, xhr) { 
      elem.innerHTML = data; 
     } 
    }); 
} 

Để cập nhật tùy chọn B Tôi đã thêm một cuộc gọi chức năng trong trường hợp của một onChange. Đây là chức năng mà chạy khi onChange sự kiện (của A) được kích hoạt:

function my_onchange(e) // "e" is element "A" 
{ 
    var sel_B = ... ; // get select element "B" 

    // I skipped some code here 
    // ... 

    var data = { 
     'mode': 'filter_city', 
     'id_A': e[e.selectedIndex] 
    }; 
    do_ajax(city_sel, data, 'ajax_handler.php'); 
} 

}

Tôi đã đọc trong JQuery docs rằng data có thể là một mảng (cặp giá trị key). Tôi nhận được lỗi nếu tôi đặt:

var data = { 
     'mode': 'filter_city', 
     'id_A': e[e.selectedIndex] 
}; 

Thay vào đó, tôi không nhận được rằng lỗi nếu dữ liệu của tôi là một chuỗi:

var data = 'mode=filter_city&id_A=' + e[e.selectedIndex]; 

Nhưng tôi cần "phiên bản mảng" của biến, trong mã php phía máy chủ của tôi.

Uncaught TypeError: Illegal invocation nằm trong tệp "jquery-1.7.2.min.js", tất cả đều được nén, vì vậy tôi không thể tìm ra phần mã nào đã đưa ra lỗi.

Có bất kỳ cài đặt nào tôi có thể thay đổi trong mã của mình để nó chấp nhận dữ liệu dưới dạng mảng kết hợp không?

Answer 1

Nhờ cuộc trò chuyện với Sarfraz, chúng tôi có thể tìm ra giải pháp.

Vấn đề là tôi đã chuyển một phần tử HTML thay vì giá trị của nó, thực sự là những gì tôi muốn thực hiện (trên thực tế trong mã php của mình, tôi cần giá trị đó như khóa ngoài để truy vấn bảng cities và lọc chính xác mục).

Vì vậy, thay vì:

var data = { 
     'mode': 'filter_city', 
     'id_A': e[e.selectedIndex] 
}; 

nó nên là:

var data = { 
     'mode': 'filter_city', 
     'id_A': e[e.selectedIndex].value 
}; 

Lưu ý: séc Jason Kulatunga của answer, nó trích JQuery doc để giải thích lý do tại sao đi qua một phần tử HTML được gây phiền hà .

Answer 2

I've read in JQuery docs that data can be an array (key value pairs). I get the error if I put:

Đây là đối tượng không phải là một mảng:

var data = { 
     'mode': 'filter_city', 
     'id_A': e[e.selectedIndex] 
}; 

Bạn có thể muốn:

var data = [{ 
     'mode': 'filter_city', 
     'id_A': e[e.selectedIndex] 
}]; 

Answer 3

Từ các tài liệu jquery cho processData:

processData Boolean
^{Default: true}
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

Hình như bạn là sẽ phải sử dụng processData để gửi d của bạn ata đến máy chủ, hoặc sửa đổi tập lệnh php của bạn để hỗ trợ các tham số mã hóa truy vấn.

Answer 4

Hãy thử này:

  $.ajax({ 
        url:"", 
        type: "POST", 
        data: new FormData($('#uploadDatabaseForm')[0]), 
        contentType:false, 
        cache: false, 
        processData:false, 
        success:function (msg) {} 
        }); 

Answer 5

Đã cùng một vấn đề thời gian gần đây, giải quyết bằng cách thêm traditional: true,

Answer 6

tôi đã nhận được lỗi này khi đăng một đối tượng FormData bởi vì tôi đã không thiết lập cuộc gọi ajax một cách chính xác. Thiết lập bên dưới đã khắc phục được sự cố của tôi.

var myformData = new FormData();   
    myformData.append('leadid', $("#leadid").val()); 
    myformData.append('date', $(this).val()); 
    myformData.append('time', $(e.target).prev().val()); 

     $.ajax({ 
      method: 'post', 
      processData: false, 
      contentType: false, 
      cache: false, 
      data: myformData, 
      enctype: 'multipart/form-data', 
      url: 'include/ajax.php', 
      success: function (response) { 
       $("#subform").html(response).delay(4000).hide(1); 
      } 
     }); 

Answer 7

$.ajax({ 
        url:"", 
        type: "POST", 
        data: new FormData($('#uploadDatabaseForm')[0]), 
        contentType:false, 
        cache: false, 
        processData:false, 
        success:function (msg) {} 
        });