JEdi​​table,如何处理JSON响应？

Question

现在,我正在使用的服务器响应发回一个JSON响应,如下所示:

{"status":1}

保存后,jeditable将实际响应{"status":1}放在页面上.无论如何要解决这个问题？

Answer 1

更好的解决方案是在返回页面之前对返回的json数据进行后处理.

假设您的服务器返回以下json字符串:

{ "status": 1, "result": "value to be displayed", "other": "some other data" }

并且您希望处理"状态"和"其他"字段,并在可编辑输入字段中显示"结果"字段.

将以下两行添加到jquery.jeditable.js:

(第95行):

var intercept = settings.intercept || function(s) {return s; };

(在第350行附近,"成功:功能(结果,状态){"之后

result = intercept.apply(self,[result]);

然后,在您自己的代码中,执行以下操作:

$(some_field).editable(
 '/some_url_on_your_server',
 {
     indicator : "<img src='/images/spinner.gif'>",
     tooltip: "Click to edit.",
     indicator: "Saving...",
     onblur: "submit",
     intercept: function (jsondata) {
         obj = jQuery.parseJSON(jsondata);
         // do something with obj.status and obj.other
         return(obj.result);
     },
     etc.

这允许你做一些很酷的事情,例如让服务器将缩写转换为完整的字符串等.

请享用!

Answer 2

通过使用回调,有一种简单的方法..editable()将任何响应转换为字符串,因此必须将响应转换为JSON变量.然后可以检索这些值,然后使用'.text()'方法写入.检查代码:

$("#myField").editable("http://www.example.com/save.php", { 
    submit    : 'Save',
    cancel    : 'Cancel',
    onblur    : "ignore",
    name      : "sentText",
    callback : function(value, settings) {
        var json = $.parseJSON(value);
        $("#myField").text(json.sentText);
    }
});

Answer 3

所以我想出的解决方案与 madcapnmckay 在这里回答的类似。

var editableTextArea = $('.editable-textarea');
        editableTextArea.editable(submitEditableTextArea, {
    type      : 'textarea',
    cancel    : 'Cancel',
    submit    : 'Save',
            name            : editableTextArea.attr('id'),
            method      : 'post',
            data            : function(value, settings) {
                                        return $.fn.stripHTMLforAJAX(value);
                                    },
            event     : "dblclick",

    onsubmit    : function(value, settings) {
                //jquery bug: on callback reset display from block to inline
                $('.btn-edit').show(0, function(){$(this).css('display','inline');});
              },
    onreset     : function(value, settings) {
                //jquery bug: on callback reset display from block to inline
                $('.btn-edit').show(0, function(){$(this).css('display','inline');});
              }
  });

那么url函数就是

function submitEditableTextArea(value, settings) { 
                        var edits = new Object();
                        var result = $.fn.addHTMLfromAJAX(value);
                        edits[settings.name] = [value];
                        var returned = $.ajax({
                            type            : "POST",
                            data            : edits,
                            dataType    : "json",
                            success     : function(_data) {
                                var json = eval( _data );
                                if ( json.status == 1 ) {
                                    console.log('success');
                                }
                            }
                        });
                        return(result);
                    }