X-editable 不在 submit() 上发送 Json答案

【问题标题】：X-editable not sending Json on submit()X-editable 不在 submit() 上发送 Json
【发布时间】：2014-04-09 14:40:47
【问题描述】：

我在使用 x-editable 创建新对象并将其发布到我的 Spring 后端时遇到问题。目前我有我的页面来编辑所有信息。但是当我点击发送按钮时，信息不是以 json 格式发送，而是像这样

id=value&id=value

我需要接收 json，因为我将使用 jackson 将创建的对象直接加载到我的 java 对象中。

这是我的html代码

<div class="row">
        <table class="table table-hover" id="record">
            <tr>
                <td>Traject name</td>
                <td><a class="myeditable" id="new_name" data-type="text">Name here</a></td>
            </tr>
            <tr>
                <td>Academic Year</td>
                <td><a class="myeditable" id="new_year" data-type="text">Year picker</a></td>
            </tr>
            <tr>
                <td>Courses</td>
                <td><a href="#" class="myeditable myCourse" id="courseName1" data-type="select"
                data-title="Select Course" >Courses</a></td>    
            </tr>
            <tr>
                <td>Courses 2</td>
                <td><a href="#" class="myeditable myCourse" id="courseName2" data-type="select"
                data-title="Select Course" >Courses</a></td>    
            </tr>
        </table>
    <button type="button" class="btn btn-primary" id="save-btn">
                <span class="glyphicon glyphicon-chevron-down"></span>&nbsp;Submit
    </button>

以及对应的jQuery代码：

$(function() {
 $('#new_name').editable(
         {name: 'trajectName',
             ajaxOptions: {
                    dataType: 'json'
                }}, 
         'validate', function(v) {
     if(!v) return 'Required field!';
 });

 $('#new_year').editable(
         {name: 'academicYear',
             ajaxOptions: {
                    dataType: 'json'
                }},
         'validate', function(v) {
                 if(!v) return 'Required field!';
 });


 $('.myeditable').editable({
        source: 'api/course/all/formated',
        sourceCache: true
    });  

 $('#save-btn').click(function() {
       $('.myeditable').editable('submit', { 
           url: 'api/traject/new',
           params: function(params) {return JSON.stringify(params);
            },
           ajaxOptions: {
               contentType: 'application/json',
               dataType: 'json' //assuming json response
            },
            success: function () {console.log("Success Respnse from server")},
            error: function() {console.log("Error response form server")}
       });
    });
});

类女巫将被 json 填充：

public class Traject {

private int id;

private String trajectName;

private int startingYear;

private List<Courses> courses;

提前感谢您的帮助。

Timbo925

【问题讨论】：

我也有同样的问题。 params 选项似乎仅在附加到字段并且单独发送字段更新时才起作用。当使用提交事件发送所有数据时，它不会被调用。

标签： java javascript jquery json x-editable

【解决方案1】：

您的问题的答案在this 问题中。

这是一个例子：

$(document).ready(function() {
  $('#username').editable({
    ajaxOptions: {contentType: 'application/json', dataType: 'json'},
    params: function(params) { return JSON.stringify(params); },
  });
});

这对我有用。

【讨论】：