Question

我有这个ajax帖子，效果非常好，所以它运行test函数data传递给它。

$("#formID").submit(function (event) {
    $('#postError').html('').hide();
    $('#postInfo').html('loading results').show();
    event.preventDefault();

    $.ajax({
                type: 'POST',
                url: $("#formID").attr('action'),
                data: $(this).serialize()
            })
            .done(function (data) {
                $('#postInfo').html('').hide();
                test(data);
            })
            .fail(function () {
                $('#postInfo').html('').hide();
                console.log(1);
           });
})

这就是出错的地方，

function test(data) {
    console.log(data);
    if ($.isArray(data)){
        $('#postSuccess').html(data).show();
    }else {
        $('#postError').html(data).show();
    }
}

这是我在console.log中获得的内容：

 [{"a1":"1","a1amount":"300","a2":"2","a2amount":"300","a3":"3","a3amount":"300"
 ,"a4":"4","a4amount":"300","a5":"5","a5amount":"60"}, 
 {"b1":"6","b1amount":"75","b2":"7","b2amount":"75","b3":"8","b3amount":"75"}, 
 {"c1":"9","c1amount":"40","c2":"10","c2amount":"40","c3":"11","c3amount":"40"," c4":"12","c4amount":"40"}]

这是正常的json数组，还是我错了？如果我正确，那么我想知道为什么它运行其他部分如果我错了，那么我想知道函数或数组的错误。

Answer 1

.serialize()方法使用标准的URL编码表示法创建文本字符串。它可以作用于选择了单独表单控件的jQuery对象。

您的函数test()更改它以保持此工作

function test(data) {
    var res = JSON.parse(data);
    console.log(res);
    if ($.isArray(res)){
        $('#postSuccess').html(data).show();
    }else {
        $('#postError').html(data).show();
    }
}

根本原因是你得到了字符串。

Answer 2

如果您可以控制服务器，最好的解决方案是在响应中包含Content-Type: application/json的标头。这样，$.ajax(...)调用将知道如何在收到数据时处理数据。有关血腥的详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type。

如果您无权访问服务器端代码，则可以向ajax请求添加名为dataType的属性，如下所示。这样就无需JSON.parse(...)所有回复。

示例1

在此示例中，我将演示您的服务器当前正在执行的操作。示例API服务器返回正确的标头，因此我必须设置dataType: 'html'来模拟您的服务器。

$.ajax({
    type: 'GET',
    url: 'https://jsonplaceholder.typicode.com/posts',
    dataType: 'html'
  })
  .done(function(data) {
    test(data);
  })
  .fail(function() {
    console.log(1);
  });

function test(data) {
  console.log(data);
  if ($.isArray(data)) {
    console.log("array :-)")
  } else {
    console.log("no array :-(")
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

示例2

这是一个示例，演示如何设置dataType: 'json'以使回调中的数据与您的预期数据格式匹配。

$.ajax({
    type: 'GET',
    url: 'https://jsonplaceholder.typicode.com/posts',
    dataType: 'json' // set dataType to 'JSON'
  })
  .done(function(data) {
    test(data);
  })
  .fail(function() {
    console.log(1);
  });

function test(data) {
  console.log(data);
  if ($.isArray(data)) {
    console.log("array :-)")
  } else {
    console.log("no array :-(")
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

function test(data) {
    console.log(data);

    if ($.isArray(JSON.parse(data))){
        $('#postSuccess').html(data).show();
    }else {
        $('#postError').html(data).show();
    }
}

jQuery $ .isArray

3 个答案: