javascript - 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" }

并且您想处理“状态”和“其他”字段，并在可编辑输入字段中显示“结果”字段。

将以下 2 行添加到 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

这就是我处理 json 响应的方式。

首先，使用 设置数据类型ajaxoptions。然后，在回调函数中处理您的数据。其中，this.revert是你的原始价值。

oTable.$('td:eq(3)').editable('/admin/products/add_quantity_used', {
    "callback" : function(sValue, y) {
        var aPos = oTable.fnGetPosition(this);          
        if($("#dialog-message").length != 0){
            $("#dialog-message").remove();
        }
        if(!sValue.status){
        $("body").append('<div id="dialog-message" style="display:none;">'+sValue.value+'</div>');
        $( "#dialog-message" ).dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        }); 
        if(this.revert != '')
            oTable.fnUpdate(this.revert, aPos[0], aPos[1]);
        else 
            oTable.fnUpdate("click to edit", aPos[0], aPos[1]);
      }else
        if(sValue.status)
            oTable.fnUpdate(sValue.value, aPos[0], aPos[1]);


    },
    "submitdata" : function(value, settings) {
        return {
            "data[users_to_products][users_to_products_id]" : this.parentNode.getAttribute('id'),
            "column" : oTable.fnGetPosition(this)[2]                
        };
    },
    "height" : "30px",
    "width" : "30px",
    "maxlength" : "3",
    "name" : "data[users_to_products][quantity_used]",
    "ajaxoptions": {"dataType":"json"}
}).attr('align', 'center');

Answer 4

所以我想出的解决方案类似于 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);
                    }