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

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

{"status":1} 

保存后，jeditable会在页面上显示实际响应： {"status":1} 。 无论如何要解决这个问题？

Answer 1

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

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

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

并且您希望处理“status”和“other”字段，并在可编辑输入字段中显示“result”字段。

将以下2行添加到jquery.jeditable.js：

（约95行）：

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

（在第350行附近，“成功：function（结果，状态）{”之后

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

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

 $(some_field).editable( '/some_url_on_your_server', { indicator : "", 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('
'+sValue.value+'
'); $( "#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); }