What is a promise in Javascript?

Question

Pedro

Asked: 2020-12-27 19:40:16 +0800 CST 2020-12-27 19:40:16 +0800 CST 2020-12-27 19:40:16 +0800 CST

如何将 jQuery 代码更新到新版本并修复编辑用户 - ajax 中的错误？

772

我制作了一个小的 jQuery 模态框弹出脚本。

但请注意，在新的 jQuery 版本中有新的变化，已经弃用的代码，我如何升级jQuery 2.1到jQuery 3.2.1使用新的 ajax 响应方法done而fail不是旧使用的版本success

现在在我的代码中，我在编辑用户数据时遇到问题，当我编辑用户数据而不是更新编辑的用户数据时，它所做的是添加一个新用户而不是更新它。

弹出模态框ajax代码

$(function() {
  //----- OPEN
  $('[data-modal-open]').on('click', function(e)  {
    $('#insert_form')[0].reset();
    var targeted_modal_class = jQuery(this).attr('data-modal-open');

    $('[data-modal="' + targeted_modal_class + '"]').fadeIn(350);
    e.preventDefault();
  });

  //----- CLOSE
  $('[data-modal-close]').on('click', function(e)  {
    var targeted_modal_class = jQuery(this).attr('data-modal-close');
    $('[data-modal="' + targeted_modal_class + '"]').fadeOut(350);

    e.preventDefault();
  });
});
  $(document).ready(function(){  
      $('#add').click(function(){  

                     $('#employee_id').val("");
           $('#insert_form')[0].reset();  
      });  
      $(document).on('click', '.edit_data', function(){ 

           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"fetch.php",  
                method:"POST",  
                data:{employee_id:employee_id},  
                dataType:"json",  
                success:function(data){  
                     $('#name').val(data.name);  
                     $('#address').val(data.address);  
                     $('#gender').val(data.gender);  
                     $('#designation').val(data.designation);  
                     $('#age').val(data.age);  
                     $('#employee_id').val(data.id);  
                     $('#insert').val("Update");  
                     $('[data-modal="add_data_modal"]').fadeIn(350);

      
                }  
           });  
      });  
      $('#insert_form').on("submit", function(event){  
           event.preventDefault();  

            $('[data-modal="add_data_modal"]').fadeOut(350);
      
           if($('#name').val() == "")  
           {  
                alert("Name is required");  
           }  
           else if($('#address').val() == '')  
           {  
                alert("Address is required");  
           }  
           else if($('#designation').val() == '')  
           {  
                alert("Designation is required");  
           }  
           else if($('#age').val() == '')  
           {  
                alert("Age is required");  
           }  
           else  
           {  
                $.ajax({  
                     url:"insert.php",  
                     method:"POST",  
                     data:$('#insert_form').serialize(),  
                     beforeSend:function(){  
                          $('#insert').val("Inserting");  
                     },  
                     success:function(data){  
                         
                          $('#insert_form')[0].reset();  
                              $('[data-modal="add_data_modal"]').fadeOut(350);

                          $('#employee_table').html(data);  
                     }  
                });  
           }  
      });  
      $(document).on('click', '.view_data', function(){  
           var employee_id = $(this).attr("id");  
           if(employee_id != '')  
           {  
                $.ajax({  
                     url:"select.php",  
                     method:"POST",  
                     data:{employee_id:employee_id},  
                     success:function(data){
                            $('[data-modal="empdetail"]').fadeIn(350);
                            $('#employee_detail').html(data);  
      
                     }  
                });  
           }            
      });  
 });

.content {
	max-width:800px;
	width:100%;
	margin:0px auto;
	margin-bottom:60px;
}

/* Outer */
.modal {
	width:100%;
	height:100%;
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.2);
  z-index: 99999;
}

/* Inner */
.modal-inner {
	width: 500px;
	position: relative;
	margin: 10% auto;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #fff;
}

/* Close Button */
.modal-close {
	width:30px;
	height:30px;
	padding-top:4px;
	display:inline-block;
	position:absolute;
	top:0px;
	right:0px;
	transition:ease 0.25s all;
	-webkit-transform:translate(50%, -50%);
	transform:translate(50%, -50%);
	border-radius:1000px;
	background:rgba(0,0,0,0.8);
	font-family:Arial, Sans-Serif;
	font-size:20px;
	text-align:center;
	line-height:100%;
	color:#fff;
}

.modal-close:hover {
	-webkit-transform:translate(50%, -50%) rotate(180deg);
	transform:translate(50%, -50%) rotate(180deg);
	background:rgba(0,0,0,1);
	text-decoration:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="width:700px;">  
                <h3 align="center">PHP Ajax Update MySQL Data Through Bootstrap Modal</h3>  
                <br />  
                <div class="table-responsive">  
                     <div align="right">  
                          <button type="button" name="add" id="add" data-toggle="modal" data-modal-open="add_data_modal" class="btn btn-warning">Add</button>  
                     </div>  
                     <br />  
                     <div id="employee_table">  
                          <table class="table table-bordered">  
                               <tr>  
                                    <th width="70%">Employee Name</th>  
                                    <th width="15%">Edit</th>  
                                    <th width="15%">View</th>  
                               </tr>  
                                <?php  
                               while ($stmt->fetch()) {
                               ?>  
                               <tr>  
                                    <td><?php echo $name; ?></td>  
                                    <td><input type="button" name="edit" value="Edit" id="<?php echo $id; ?>" class="btn btn-info btn-xs edit_data" /></td>  
                                    <td><input type="button" name="view" value="view" id="<?php echo $id; ?>" class="btn btn-info btn-xs view_data" /></td>  
                               </tr>  
                               <?php  
                               }  
                               ?>    
                          </table>  
                     </div>  
                </div>  
           </div>  
      </body>  
 </html>  
  
<div id="dataModal" class="modal" data-modal="empdetail">  
      <div class="modal-inner">  
           <div class="modal-content">  
                <div class="modal-header">  
                      <a class="modal-close" data-modal-close="empdetail" href="#">x</a>
                     <h4 class="modal-title">Employee Details</h4>  
                </div>  
                <div class="modal-body" id="employee_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-modal-close="empdetail">Close</button> 

                </div>  
           </div>  
      </div>  
 </div>  
 <div id="add_data_Modal" class="modal"  data-modal="add_data_modal">  
      <div class="modal-inner">  
           <div class="modal-content">  
                <div class="modal-header">  
                      <a class="modal-close" data-modal-close="add_data_modal" href="#">x</a>

                     <h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal</h4>  
                </div>  
                <div class="modal-body">  
                     <form method="post" id="insert_form">  
                          <label>Enter Employee Name</label>  
                          <input type="text" name="name" id="name" class="form-control" />  
                          <br />  
                          <label>Enter Employee Address</label>  
                          <textarea name="address" id="address" class="form-control"></textarea>  
                          <br />  
                          <label>Select Gender</label>  
                          <select name="gender" id="gender" class="form-control">  
                               <option value="Male">Male</option>  
                               <option value="Female">Female</option>  
                          </select>  
                          <br />  
                          <label>Enter Designation</label>  
                          <input type="text" name="designation" id="designation" class="form-control" />  
                          <br />  
                          <label>Enter Age</label>  
                          <input type="text" name="age" id="age" class="form-control" />  
                          <br />  
                          <input type="hidden" name="employee_id" id="employee_id" />  
                          <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />  
                     </form>  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-modal-close="add_data_modal" href="#">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>

2 Answers

Voted

Publisere.com · Answer 1 · 2020-01-05T04:09:06+08:00

Realmente no es tan difícil realizar la migración, realmente se debe tener en cuenta ciertos procedimientos sencillos que están enlazados casi al mismo código a diferencia que solo cambian los nombres.

Esto puede verificar desde la página oficial jQuery & Ajax

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

En SO existen preguntas basadas al tema que puede servir, para seguir estudiando sus procedimientos:

Existen otras preguntas que toman el tema, puede ser de gran utilidad enlazarlas más que todo para ver sus ejmplos de uso.

done最后，使用新方法的代码看起来像这样fail，应该注意的是，我只进行了这些更改。

您应该执行以下操作来document.ready替换：

$(function() {
  //document.ready es obsoleto desde jQuery 3
});

$(function() {
  //----- OPEN
  $('[data-modal-open]').on('click', function(e)  {
    $('#insert_form')[0].reset();
    var targeted_modal_class = jQuery(this).attr('data-modal-open');

    $('[data-modal="' + targeted_modal_class + '"]').fadeIn(350);
    e.preventDefault();
  });

  //----- CLOSE
  $('[data-modal-close]').on('click', function(e)  {
    var targeted_modal_class = jQuery(this).attr('data-modal-close');
    $('[data-modal="' + targeted_modal_class + '"]').fadeOut(350);

    e.preventDefault();
  });
});
  $(document).ready(function(){  
      $('#add').click(function(){  

                     $('#employee_id').val("");
                     $('#insert').val("Insert");
           $('#insert_form')[0].reset();  
      });  
      $(document).on('click', '.edit_data', function(){ 

           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"fetch.php",  
                method:"POST",  
                data:{employee_id:employee_id},  
                dataType:"json"})  
                .done(function(data){  
                     $('#name').val(data.name);  
                     $('#address').val(data.address);  
                     $('#gender').val(data.gender);  
                     $('#designation').val(data.designation);  
                     $('#age').val(data.age);  
                     $('#employee_id').val(data.id);  
                     $('#insert').val("Update");  
                     $('[data-modal="add_data_modal"]').fadeIn(350);

      
                }).fail(function() {
    				alert( "Ajax Request fail" );
  				})

            
      });  
      $('#insert_form').on("submit", function(event){  
           event.preventDefault();  

            
           if($('#name').val() == "")  
           {  
                alert("Name is required");  
           }  
           else if($('#address').val() == '')  
           {  
                alert("Address is required");  
           }  
           else if($('#designation').val() == '')  
           {  
                alert("Designation is required");  
           }  
           else if($('#age').val() == '')  
           {  
                alert("Age is required");  
           }  
           else  
           {  
                $.ajax({  
                     url:"insert.php",  
                     method:"POST",  
                     data:$('#insert_form').serialize(), 
                     beforeSend:function(){  
                          $('#insert').val("Inserting");  
                     }
                     })  
                     .done(function(data){  
                         
                          $('#insert_form')[0].reset();  
                              $('[data-modal="add_data_modal"]').fadeOut(350);

                          $('#employee_table').html(data);      
                     })  
                     .fail(function() {
   						 alert( "Insert ajax request fail" );
  								}) 
                  
                  
           }
      });  
      $(document).on('click', '.view_data', function(){  
           var employee_id = $(this).attr("id");  
           if(employee_id != '')  
           {  
                $.ajax({  
                     url:"select.php",  
                     method:"POST",  
                     data:{employee_id:employee_id}})  
                     .done(function(data){
                            $('[data-modal="empdetail"]').fadeIn(350);
                            $('#employee_detail').html(data);  
      
                     }) .fail(function() {
   						 alert( "Select ajax request fail" );
  								}) 
                     
           }            
      });  
 });

.content {
	max-width:800px;
	width:100%;
	margin:0px auto;
	margin-bottom:60px;
}

/* Outer */
.modal {
	width:100%;
	height:100%;
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.2);
  z-index: 99999;
}

/* Inner */
.modal-inner {
	width: 500px;
	position: relative;
	margin: 10% auto;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #fff;
}

/* Close Button */
.modal-close {
	width:30px;
	height:30px;
	padding-top:4px;
	display:inline-block;
	position:absolute;
	top:0px;
	right:0px;
	transition:ease 0.25s all;
	-webkit-transform:translate(50%, -50%);
	transform:translate(50%, -50%);
	border-radius:1000px;
	background:rgba(0,0,0,0.8);
	font-family:Arial, Sans-Serif;
	font-size:20px;
	text-align:center;
	line-height:100%;
	color:#fff;
}

.modal-close:hover {
	-webkit-transform:translate(50%, -50%) rotate(180deg);
	transform:translate(50%, -50%) rotate(180deg);
	background:rgba(0,0,0,1);
	text-decoration:none;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<div class="container" style="width:700px;">  
                <h3 align="center">PHP Ajax Update MySQL Data Through Bootstrap Modal</h3>  
                <br />  
                <div class="table-responsive">  
                     <div align="right">  
                          <button type="button" name="add" id="add" data-toggle="modal" data-modal-open="add_data_modal" class="btn btn-warning">Add</button>  
                     </div>  
                     <br />  
                     <div id="employee_table">  
                          <table class="table table-bordered">  
                               <tr>  
                                    <th width="70%">Employee Name</th>  
                                    <th width="15%">Edit</th>  
                                    <th width="15%">View</th>  
                               </tr>  
                                <?php  
                               while ($stmt->fetch()) {
                               ?>  
                               <tr>  
                                    <td><?php echo $name; ?></td>  
                                    <td><input type="button" name="edit" value="Edit" id="<?php echo $id; ?>" class="btn btn-info btn-xs edit_data" /></td>  
                                    <td><input type="button" name="view" value="view" id="<?php echo $id; ?>" class="btn btn-info btn-xs view_data" /></td>  
                               </tr>  
                               <?php  
                               }  
                               ?>    
                          </table>  
                     </div>  
                </div>  
           </div>  
      </body>  
 </html>  
  
<div id="dataModal" class="modal" data-modal="empdetail">  
      <div class="modal-inner">  
           <div class="modal-content">  
                <div class="modal-header">  
                      <a class="modal-close" data-modal-close="empdetail" href="#">x</a>
                     <h4 class="modal-title">Employee Details</h4>  
                </div>  
                <div class="modal-body" id="employee_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-modal-close="empdetail">Close</button> 

                </div>  
           </div>  
      </div>  
 </div>  
 <div id="add_data_Modal" class="modal"  data-modal="add_data_modal">  
      <div class="modal-inner">  
           <div class="modal-content">  
                <div class="modal-header">  
                      <a class="modal-close" data-modal-close="add_data_modal" href="#">x</a>

                     <h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal</h4>  
                </div>  
                <div class="modal-body">  
                     <form method="post" id="insert_form">  
                          <label>Enter Employee Name</label>  
                          <input type="text" name="name" id="name" class="form-control" />  
                          <br />  
                          <label>Enter Employee Address</label>  
                          <textarea name="address" id="address" class="form-control"></textarea>  
                          <br />  
                          <label>Select Gender</label>  
                          <select name="gender" id="gender" class="form-control">  
                               <option value="Male">Male</option>  
                               <option value="Female">Female</option>  
                          </select>  
                          <br />  
                          <label>Enter Designation</label>  
                          <input type="text" name="designation" id="designation" class="form-control" />  
                          <br />  
                          <label>Enter Age</label>  
                          <input type="text" name="age" id="age" class="form-control" />  
                          <br />  
                          <input type="hidden" name="employee_id" id="employee_id" />  
                          <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />  
                     </form>  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-modal-close="add_data_modal" href="#">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>

Dev. Joel · Answer 2 · 2020-01-02T14:36:36+08:00

您的 Jquery 代码对这个问题的补充似乎很清楚，它总是将form模式发送到同一个文件php，但它的验证知道要执行什么操作是

if($_POST["employee_id"] != '')  { ...}

ajax 但是您的安全方法总是发送空白值并且不输入if，该字段是隐藏的，但您发送并填写此方法。fetch.php如果属性id存在，您应该检查返回的数据，如果没有，您应该将其添加到您的查询select中。

解决了第一点后，要将代码迁移到Jquery V3，最重要的可以修改的部分是ready文档的验证

以前它是用

$(document).ready(function($) {

});

它应该像这样修改和工作

$(function() {

});

对于函数，yAjax应该被替换为除了将始终执行的现有之外，它们具有以下结构，在变量部分中将是一个具有其属性的对象，例如，它是在响应时或直接发文。successerrordonefailalwaysfailjqxhrresponseXML y/ o responseTextXML

$(function() {
    $.ajax({
        url: 'script.php',
        type: 'POST',
        dataType: 'JSON',
        data: {name: 'Nombre'},
    })
    .done(function() {
        console.log("Correcto");
    })
    .fail(function( jqXHR, textStatus ) {
        console.log(jqXHR.responseText);//Posible Texto Error
        console.log("Request failed: " + textStatus );
    }).always(function() {
        console.log("complete");
    });
});

很明显，在示例中这些方法是直接调用的，.método(function()){...}但您也可以在变量中ajax调用并直接从所述变量调用这些方法。

$(function() {
    var request = $.ajax({
        url: 'script.php',
        type: 'POST',
        dataType: 'JSON',
        data: {name: 'Nombre'},
    });


    request.done(function() {
        console.log("Correcto");
    })

    request.fail(function( jqXHR, textStatus ) {
        console.log(jqXHR.responseText);//Posible Texto Error
        console.log("Request failed: " + textStatus );
    })

    request.always(function() {
        console.log("complete");
    });
});

对于您的代码，修改将使您的代码具有以下格式

$(function() {
    //----- OPEN
    $('[data-modal-open]').on('click', function(e)  {
        $('#insert_form')[0].reset();
        var targeted_modal_class = jQuery(this).attr('data-modal-open');

        $('[data-modal="' + targeted_modal_class + '"]').fadeIn(350);
        e.preventDefault();
    });

    //----- CLOSE
    $('[data-modal-close]').on('click', function(e)  {
        var targeted_modal_class = jQuery(this).attr('data-modal-close');
        $('[data-modal="' + targeted_modal_class + '"]').fadeOut(350);

        e.preventDefault();
    });

    $('#add').click(function(){  
        $('#employee_id').val("");
        $('#insert_form')[0].reset();  
    });  
    $(document).on('click', '.edit_data', function(e){ 
       var employee_id = $(this).attr("id");  
       $.ajax({  
            url:"fetch.php",  
            method:"POST",  
            data:{employee_id:employee_id},  
            dataType:"json"
       }).done(function(data){
            $('#name').val(data.name);  
            $('#address').val(data.address);  
            $('#gender').val(data.gender);  
            $('#designation').val(data.designation);  
            $('#age').val(data.age);  
            $('#employee_id').val(data.id);  
            $('#insert').val("Update");  
            $('[data-modal="add_data_modal"]').fadeIn(350);
       });
    });  

    $("#insert_form").submit(function(e){
       event.preventDefault();  

        $('[data-modal="add_data_modal"]').fadeOut(350);

       if($('#name').val() == "")  
       {  
            alert("Name is required");  
       }  
       else if($('#address').val() == '')  
       {  
            alert("Address is required");  
       }  
       else if($('#designation').val() == '')  
       {  
            alert("Designation is required");  
       }  
       else if($('#age').val() == '')  
       {  
            alert("Age is required");  
       }  
       else  
       {  
            e.preventDefault();
            var name = $('#nombre').val();
            $.ajax({
                url: 'insert.php',
                type: 'POST',
                data: $('#insert_form').serialize(),
                beforeSend: function( xhr ) {
                   $('#insert').val("Inserting");
                }
            })
            .done(function(data) {
                $('#insert_form')[0].reset();  
                $('[data-modal="add_data_modal"]').fadeOut(350);
                $('#employee_table').html(data); ;
            }).fail(function( jqXHR, textStatus ) {
                console.log(jqXHR.responseText);//Posible Texto Error
                console.log("Request failed: " + textStatus );
            })
       } 
    }); 
    $(document).on('click', '.view_data', function(e){  
       var employee_id = $(this).attr("id");  
       if(employee_id != '')  
       {  
            $.ajax({  
                 url:"select.php",  
                 method:"POST",  
                 data:{employee_id:employee_id}
            }).done(function(data){
                $('[data-modal="empdetail"]').fadeIn(350);
                $('#employee_detail').html(data);  
            });
       }  
    });
});

有关Jquery 3其新闻的更多详细信息，您可以查看此问题

如何将 jQuery 代码更新到新版本并修复编辑用户 - ajax 中的错误？

弹出模态框ajax代码

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?