Question

我通过$ .ajax（）将多个数据传递给我的PHP脚本时遇到问题。这是我调用的函数，通过uploadImages.php文件将一组图像上传到文件夹，并将两个数据，form_data和category传递给文件 -

function uploadImages(containerId){
container = document.getElementById(containerId);
container.style.display = "none";
var rtnMsg = '';
var success = '0';

var category = form.inpCategory.value;
if(category <= 0) {
        success = '0';
        rtnMsg = 'Please enter value of category.';
        showMsg();  
        category.focus();
        throw new Error(rtnMsg);    
}

var form_data = new FormData();
    var l = document.getElementById('file_to_upload').files.length;
    for (var x = 0; x < l; x++) {
        form_data.append("files[]", document.getElementById('file_to_upload').files[x]);
    }

$.ajax({
    url: 'includes/uploadImages.php', // point to server-side PHP script
    dataType: 'json',  // what to expect back from the PHP script, if anything
    cache: false,
    contentType: false,
    processData: true,
    data: { form_data: form_data , category: category},
    type: 'post',
    success: function(out){
        // get server response here
        //alert(out);
        // clear file field
        var arrResponse = JSON.parse(out);
        rtnMsg = arrResponse.rtnMsg;
        success = arrResponse.success;
        },
        error: function(jqXHR, exception) {
            if (jqXHR.status === 0) {
                rtnMsg = 'Not connect.\n Verify Network.';
            } else if (jqXHR.status == 404) {
                rtnMsg = 'Requested page not found. [404]';
            } else if (jqXHR.status == 500) {
                rtnMsg = 'Internal Server Error [500].';
            } else if (exception === 'parsererror') {
                rtnMsg = 'Requested JSON parse failed.';
            } else if (exception === 'timeout') {
                rtnMsg = 'Time out error.';
            } else if (exception === 'abort') {
                rtnMsg = 'Ajax request aborted.';
            } else {
                rtnMsg = 'Uncaught Error.\n' + jqXHR.responseText;
            }
            success = '0';
            showMsg();
        }
}).done(function() {
        $("#file_to_upload").val("");
        showMsg();
});
//Nested function. because in case of error, it is not going in done function.
function showMsg(){

    if(success === '1'){
        container.innerHTML = '<strong>Success! </strong>' + rtnMsg;
        container.classList.remove("alert-danger");
        container.classList.add("alert-success");
    }
    else {
        container.innerHTML = '<strong>Error! </strong>' + rtnMsg;
        container.classList.remove("alert-success");
        container.classList.add("alert-danger");
    }
    container.style.display = "block";

}
}

数据中传递的参数是form_data，它是一个数组，类别是变量。每次我运行代码时，都会收到此错误 -

Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at Object.success (products.php:183)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at A (jquery.min.js:4)
at XMLHttpRequest.<anonymous> (jquery.min.js:4)

Answer 1

您需要将category附加到form_data，并将其自身作为AJAX数据发送，而不是将其包装在对象中。

function uploadImages(containerId) {

  container = document.getElementById(containerId);

  container.style.display = "none";
  var rtnMsg = '';

  var success = '0';

  var category = form.inpCategory.value;
  if (category <= 0) {
    success = '0';
    rtnMsg = 'Please enter value of category.';
    showMsg();
    category.focus();
    throw new Error(rtnMsg);
  }

  var form_data = new FormData();
  var l = document.getElementById('file_to_upload').files.length;
  for (var x = 0; x < l; x++) {
    form_data.append("files[]", document.getElementById('file_to_upload').files[x]);
  }
  form_data.append("category", category);

  $.ajax({
      url: 'includes/uploadImages.php', // point to server-side PHP script
      dataType: 'json',
      cache: false,
      contentType: false,
      processData: false,
      data: form_data,
      type: 'post',
      success: function(arrResponse) {
        rtnMsg = arrResponse.rtnMsg;
        success = arrResponse.success;
      }
    );
  }

同时检查您的服务器脚本并确保仅返回JSON。如果您期待JSON，请使用dataType: 'json'然后自动解析它。

Answer 2

我认为您应该在将数据发送到服务器之前对其进行字符串化（如果您的数据纯粹是JSON）。

示例：的

var myJSON = JSON.stringify（your_json_object）;

在传递给服务器之前，请参阅如何使用JSON.stringify()数据。

但是，由于您要将图像上传到服务器，因此它将作为多部分请求进行处理，根据您在方法中看到的签名，您获得的响应应该是JSON。大多数情况下，我怀疑响应包含一些非json字符，这就是jquery抱怨的原因

未捕获的SyntaxError：意外的令牌＆lt;在位置0的JSON中

您是否可以检查浏览器中的“网络”标签，看看您从服务器获得的确切内容作为回复？（有时可能会给出带有HTML标签的500错误页面作为响应，这可能会解释您所看到的意外令牌错误）

无法使用$ .ajax（）将数组和变量传递给服务器

2 个答案: