【问题标题】:Ajax reuquest success with json as return value doesn't work以json为返回值的Ajax请求成功不起作用
【发布时间】:2016-12-10 11:35:40
【问题描述】:

我创建了一个数据表,如果您单击“加号”按钮,您可以在其中添加行。这会将 ajax 请求发送到以 rowId 作为参数的 url。 (rowId 是按下加号按钮的行。)然后我想获取一个 json 作为返回值,以便这个 json 用新行更新我的数据表。

问题是:我的 ajax 请求永远不会到达成功部分,即使我在网络监视器中看到它也是如此。有谁知道为什么?

<table class="table display" id="tabelle_benutzerHead" cellspacing="0" width="100%">
    <thead >
        <tr>
            <th>Uhrzeit</th>
            <th>SpNr</th>
            <th>Platz</th>
            <th>Heimmannschaft</th>
            <th>Gastmannschaft</th>
            <th>Freispiele</th>
        </tr>
    </thead>
    <tbody>
            <tr id="Row1">
                <td>08:00</td>
                <td>134</td>
                <td>Platz 1</td>
                <td>Team 5</td>
                <td>Team 3</td>
                <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
            </tr>
            <tr id="Row2">
                <td>09:00</td>
                <td>76</td>
                <td>Platz 3</td>
                <td>Team 7</td>
                <td>Team 1</td>
                <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
            </tr>
            <tr id="Row3">
                <td>17:30</td>
                <td>45</td>
                <td>Platz 11</td>
                <td>Team 2</td>
                <td>Team 9</td>
                <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
            </tr>
    </tbody>
</table>
var oTable = $('#tabelle_benutzerHead').DataTable({
    responsive: true,
    "bAutoWidth": false,
    "bFilter": false,
    "info": false,
    "scrollCollapse": true,
    "paging": false,
    rowReorder: true
})

oTable.on('row-reorder', function(e, diff, edit) {

    var draggedRow = diff[(diff.length - 1)].node;
    var draggedRowId = $(draggedRow).attr('id');    <!-- dragged and dropped Row -->
    var previousRow = diff[(diff.length - 2)].node;
    var previousRowId = $(previousRow).attr('id');  <!-- the row before the dragged and dropped -->

    $.ajax({
        type: "POST",
        url: "myurl.html",
        data: { 
            draggedRowId,
            previousRowId               
            }
    });                     
});

var uhrzeit;
var spNr;
var platz; 
var heimmannschaft;
var gastmannschaft;

$(function() {

    $('#tabelle_benutzerHead').delegate('button.AddDaten', 'click', function() {
        var row = $(this).closest('tr'); // get the parent row of the clicked button

        var tableRowAppend = '<tr><td>' + uhrzeit + '</td><td>' + spNr + '</td><td>' + platz + '</td><td>'+ heimmannschaft + '</td><td>'+ gastmannschaft + 
                            '</td><td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td></tr>';         

        var rowId = $(row).attr('id'); // clicked RowId

        $.ajax({
            type: "POST",
            url: "myurl.html",
            data: { 
                rowId
            },  
            dataType: 'json',
            contentType: "application/json",
            success: function(data) {
                var dataJson =  [ 
                    "10:30",
                    "77",
                    "Platz 1",
                    "Team 7",
                    "Team 12",
                    "<button class='btn btn-default AddDaten' type='button'><i class='glyphicon glyphicon-plus-sign'></i></button>"
                ];

                $.getJSON(dataJson, function(){             
                    oTable.clear();
                    oTable.rows.add(dataJson);
                    oTable.draw();
                });     
            }
        }); 
    }); 
}); 

【问题讨论】:

  • 如果它不执行success处理程序,那你为什么不添加一个error处理程序呢?
  • 你怎么知道它没有到达你的成功部分以及你的成功部分发生了什么?您不使用返回的数据,创建自己的数据,然后对您的数据(不是 url)进行另一个 ajax 调用?
  • 这可能不是问题,但您已经告诉服务器您正在发送 JSON,但没有发送 JSON。删除 contentType 选项,或发送 JSON。
  • 将 POST 发布到扩展名为 .html 的资源也是可能,但显然很奇怪。通常你发布到一个由服务器动态处理的端点,通常.html 是静态的(当然,你可以非典型地配置东西)。
  • 去掉contentType也一样。

标签: javascript jquery json ajax datatables-1.10


【解决方案1】:

.success 在这里充当回调函数。您是否要发回一些东西作为回应? 即当发布到myurl/operationOnData

operationOnData(req,res){ // do something here with req, than res.send("Got it!"); }

【讨论】:

  • 不,我没有。我不知道该怎么做。
  • success: function(data) { // 一些操作 }, error: function(err) { console.log("Got error!", err); }
猜你喜欢
  • 2017-12-11
  • 1970-01-01
  • 2013-04-23
  • 1970-01-01
  • 1970-01-01
  • 2017-08-17
  • 1970-01-01
  • 1970-01-01
  • 2016-07-30
相关资源
最近更新 更多