X-editable不能在提交()上发送Json

时间:2014-04-09 14:40:48

标签: java javascript jquery json x-editable

使用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

1 个答案:

答案 0 :(得分:2)

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

以下是一个例子:

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

这适合我。