服务器未发回 JSON 对象答案

【问题标题】：Server not sending back JSON Object服务器未发回 JSON 对象
【发布时间】：2014-10-24 23:36:43
【问题描述】：

在客户端，我正在创建一个 JSON 对象，用于存储来自输入字段中用户输入数据的电子邮件和电子邮件类型。然后我使用ajax 将它作为 JSON 发送到我的服务器。

$(function () { 
$(document).on('click', '.send', function (e) {
    var dataToSend = [];
    $('.form-group1').each(function () {
        var data = {};
        $(this).find(':input[data-name]').each(function () {
            data[$(this).data('name')] = $(this).val();
        });
        dataToSend.push(data);
    });

    $.ajax({
       url: '/pers1',
       type: 'POST',
       contentType:'application/json',
       data: JSON.stringify(dataToSend),
       dataType:'json',
     });        
    console.log(JSON.stringify(dataToSend))
 });
});

然后服务器将其作为 JSON 对象存储到数据库中：

class PersonalInfoHandler1(BaseHandler):
@tornado.web.authenticated
def post(self):
    global piData

    receipt = tornado.escape.json_decode(self.request.body)
    print receipt

    piData={                            
            'emails': receipt,
            }      

    self.settings['db'].userInfo.update({'PiUsername':self.current_user},{"$set":piData})
    print 'from pers1'                 
    self.redirect('/pers')

当页面重新加载时，数据会在另一个Handler 中发送回：

class PersonalInfoHandler(BaseHandler):
@tornado.web.authenticated
def get(self):
    self.render("personal.html", user=self.current_user, ,emails=user['emails'])

客户端得到这个，我尝试像这样迭代 key:value：

var emails = '{{emails}}';
emails = emails.replace(/u&#39;/g,"");
emails = emails.replace(/&#39;/g,"");

emaildata=JSON.stringify(emails)

$.each(emaildata, function(key, value) { 
      alert(key + ': ' + value); 
    });

相反，我在 Chrome 控制台中收到错误：

Uncaught TypeError: Cannot use 'in' operator to search for '28' in "[{emailAdd: , emailDesc: }]" jquery.min.js:2  jquery.min.js:2 m.extend.each jquery.min.js:2 (anonymous function)

所以我不能迭代键和/或值。实际的 JSON 或代码有问题吗？

【问题讨论】：

我是否正确假设您的响应是一个数组？因为in 运算符适用于对象：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
是的，它是一个字典数组

标签： jquery python json tornado

【解决方案1】：

$.each(emaildata, ...) 没有迭代 Array 或 Object。它正在尝试逐个字符地迭代 String 值。

console.log(typeof emaildata, emaildata);
// string '"[{emailAdd: , emailDesc: }]"'

它也是另一个字符串的字符串化形式。

var emails = '[{emailAdd: , emailDesc: }]';

JavaScript中emails的值至少需要是有效的JSON，即needs encoding from Python，所以可以be parsed：

var emails = '{% raw json_encode(emails) %}';
var emaildata = JSON.parse(emails);

$.each(emaildata, function (key, value) {
    // ...
});

不过，由于 JSON 的语法来自 JavaScript，因此您可以将 JSON 作为表达式输出，以便 JavaScript 直接解析为 Array 和 Object 初始值设定项（注意去掉引号）：

var emails = {% raw json_encode(emails) %};

$.each(emails, function (key, value) {
    // ...
});

【讨论】：

谢谢。我试过做var emails = '{{json_encode(emails)}}'; var emaildata = JSON.parse(emails);alert(emaildata);。但这现在在我的控制台中出现Uncaught SyntaxError: Unexpected token & pers:1001 (anonymous function) 错误
@user94628 抱歉。在任何一种情况下，都会出现视图 should use {% raw json_encode(emails) %} 以防止 HTML 编码。我已经用它更新了我帖子中的 sn-ps。
@user94628 因为Array 中的每个value 都是Object，the [object Object] is to be expected。如果您将变量作为它们自己的参数而不是连接传递给console.log()，大多数控制台将显示更详细的视图——console.log(key, value);。
@user94628 No. key 和 value 只是 function 中的局部变量。它们本身不是emaildata 的属性，dot notation 不使用变量。您可以使用带有key 的括号表示法作为检索value -- emaildata[key] === value 的另一种方式。但是，使用像 $.each() 这样的迭代器的部分好处是不必一直引用源对象 (emaildata)。
@user94628 将控制台的console.log(key + ': ' + value); 更改为console.log(key, value); 以显示详细视图。其他4-5行都不错。

【解决方案2】：

问题在于您使用emaildata=JSON.stringify(emails)，然后尝试使用$.each() 遍历该变量。因为它是一个字符串，而不是一个对象或数组，所以 jQuery 的 each() 不适用于 i。你的意思可能是$.each(emails)。

【讨论】：