开发者问题收集

如何使用 ajax 通过 stringify.json 防止未捕获的范围错误?

2018-09-03
145

简介: 我正在使用 ajax/json 制作一个服务器端 Jquery datatables.net 库。我的示例项目可以在以下网址找到: https://databasetable-net.000webhostapp.com/

错误: 当我单击删除按钮时......控制台显示“Uncaught RangeError:超出最大调用堆栈大小”。在我看来,好像没有发出 Ajax 调用(网络选项卡上没有显示任何内容) - 所以一定是在创建请求时发出的。我怀疑我需要 JSON.stringify 我的 del_id。

Index.php 代码:

<script type="text/javascript">
$(document).ready(function() {
     $( "#form1" ).hide();
        $( "#signup" ).click( function() {
        $( "#form1" ).toggle( 'slow' );
        });     
});     
</script>

<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "server.php",
"type": "POST",
},

columnDefs: [{
targets: -1,
defaultContent: '<button type="button" class="delete_btn" data-id=<?php echo "row[id]"?> ">Delete</button>  <button type="button" class="edit_btn">Edit</button>'
}],
rowGroup: {
dataSrc: 1
}
});
});
</script>

<script type="text/javascript"> 
$(function(){
        $(document).on('click','.delete_btn',function (e) {
           e.stopPropagation();
        var per_id=$(this).data('id');
        var del_id= $(this).closest('tr');
        var ele = $(this).parent().parent();  
        console.log(del_id);

        $.ajax({
            type:'POST',
            url:'delete.php',
            dataType: 'json', //This says I'm expecting a response that is json encoded.
            data: { 'del_id' : del_id}, 

            success: function(data){ //data is an json encoded array.

              console.log('Data: ' + data); 
               console.log(JSON.stringify('Data: ' + data)); 

              if(data['success']){  //You are checking for true/false not yes or no.
                console.log('You successfully deleted the row.');
                alert("row deleted");
                ele.remove();
              }else{
                console.log('The row was not deleted.');
                }

            }
        });
        });
</script>

<script type="text/javascript">  
          $(document).on('click', '.edit_btn',function(){
            var edit_id= $(this).closest('tr');
        var ele = $(this).parent().parent();  //removed the "$" from the ele variable. It's a js variable.
        console.log(edit_id);
            $('#content-data').html('');
            $.ajax({
                url:'edit.php',
                type:'POST',
               data: { 'edit_id' : edit_id}, 
                dataType:'html'
            }).done(function(data){
                $('#content-data').html('');
                $('#content-data').html(data);
            }).fail(function(){
                $('#content-data').html('<p>Error</p>');
            });
});
 </script>

Delete.php

$del_id = $_POST['del_id']; 
$stmt = $con->prepare("DELETE FROM employees WHERE id = ?"); //LIMIT 1
$stmt->bind_param('i', $del_id);
$confirmDelete = $stmt->execute();

$array['success'] = FALSE; //Initialize the success parameter as false.
if($confirmDelete){ //Check to see if there was an affected row.
  $array['success'] = TRUE;
}

    echo json_encode($array); //Your ajax is setup to expect a json response.  
    //json_encode the $array and echo it out.  You have to do this.  
    //When you "echo" out a value, that is what the server is going to submit back to the ajax function.
    //If you do not do this, the ajax script will not recieve a response from the delete.php page.

我尝试过的方法: 我尝试在 delete.php 页面中使用 stringify.json,但没有成功。

  $array=JSON.stringify($array);
    echo json_encode($array);

这似乎已经摆脱了 Uncaught RangeError:超出最大调用堆栈大小错误:

  $(document).on("click", ".remove-discount-button", function (e) {
               e.stopPropagation();
               //some code
            });

超出最大调用堆栈大小错误

2个回答

主要堆栈问题是由 var edit_id = $(this).closest('tr'); 引起的。您尝试在 ajax 中将整个 jQuery 对象作为数据发送。然后 jQuery 无法在内部对其进行序列化并引发异常

您可能希望发送该行中的某些属性(如 ID 或数据属性)(不清楚期望是什么)

charlietfl
2018-09-03

好的。因此,使用上述示例可能无法使用 Jquery datatables.net 库(但适用于常规数据表)。相反,您必须使用渲染: https://datatables.net/reference/option/columns.render

我在他们的论坛上发帖并得到了一个快速示例: http://live.datatables.net/qemodapi/1/edit

这是我自己编写的完整代码,可以正常工作:

    <script type="text/javascript"> 
        $(document).on('click','.delete_btn',function (){
    var id = $(this).attr("id").match(/\d+/)[0];
  var del_id = $('#example').DataTable().row( id ).data();
  var del_id = del_id[0];
  console.log(del_id[0]); 
        $.ajax({
            type:'POST',
            url:'delete.php',
            dataType: 'json', //This says I'm expecting a response that is json encoded.
            data: { 'del_id' : del_id}, 
            success: function(data){ 
              if(data['success']){  //You are checking for true/false not yes or no.
                console.log('You successfully deleted the row.');
              }else{
                console.log('The row was not deleted.');
                }
                }
        });
        });
</script>
2018-09-05