无需页面刷新的php/ajax弹出式编辑_Php_Jquery_Mysql_Ajax

无需页面刷新的php/ajax弹出式编辑

php jquery mysql ajax

无需页面刷新的php/ajax弹出式编辑,php,jquery,mysql,ajax,Php,Jquery,Mysql,Ajax,我想编辑数据库表而不刷新页面并编辑所有列。出于某种原因，我的脚本似乎无法正常运行。弹出窗口工作，从数据库中选择工作，但当我按下submit时什么也没发生，我想它不会进入edit.php页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <scr

我想编辑数据库表而不刷新页面并编辑所有列。出于某种原因，我的脚本似乎无法正常运行。弹出窗口工作，从数据库中选择工作，但当我按下submit时什么也没发生，我想它不会进入edit.php页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
<head>  
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>  
 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js'></script>  
 <link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css' />  
 <script type='text/javascript'>  
  $(document).ready(function() {  
   //Create dialog  
   $edit_dialog = $("#edit_dialog").dialog({  
    autoOpen:false,   
    title:"Edit Book",   
    modal:true,   
    buttons:[  
     {text: "Submit", click: function() { $('form',$(this)).submit(); }},  
     {text: "Cancel", click: function() { $(this).dialog("close"); }},  
    ]  
   });  

   //Submit action for dialog form  
   $("#edit_dialog form").submit(function() {  
    var form = $(this);  
    //post form data to form's action attribute  
    $.post($(this).attr('action'), $(this).serialize(),function(data) {     
     //get DOM element of updated book  
     var book = $('#book_'+data.id);  

     //update title  
     $('.title',book).html(data.title);  

     //update genre  
     $('.genre',book).html(data.genre);  

     //update description  
     $('.description',book).html(data.description);  

     //close the dialog  
     $("#edit_dialog").dialog('close');  
    },'json');  

    //stop default form submit action  
    return false;  
   });  

   //when the edit link is clicked  
   function edit_link_action() {  
    //get closest book div  
    var book = $(this).closest('.book');  

    //get id from div  
    var id = book.attr('id').split('_');  
    idid = id[id.length-1];  

    //set id in form  
    $('#edit_dialog input[name="id"]').val(id);  

    //set current title in form  
    $('#edit_dialog input[name="title"]').val($('.title',book).html());  

    //set current genre in form  
    $('#edit_dialog select[name="genre"]').val($('.genre',book).html());  

    //set current description in form  
    $('#edit_dialog textarea[name="description"]').val($('.description',book).html());  

    //open dialog  
    $edit_dialog.dialog('open');  

    //stop default link action  
    return false;  
   }  

   //attach action to edit links  
   $(".edit").click(edit_link_action);  
  });  
 </script>  
</head>  
<body>  
 <div class='books'>  
  <?php  
  //connect to database  
  mysql_connect('localhost', 'mysql_user', 'mysql_password');  
  mysql_select_db('dbname');  

  //get all books  
  $query = "SELECT * FROM books";  
  $result = mysql_query($query) or die("Error selecting books");  

  //display books  
  while($row = mysql_fetch_assoc($result)) {  
  ?>  
   <div class='book' id='book_<?php echo $row['id']; ?>'>  
    <a class='edit' href='#'>edit</a>  
    <h3 class='title'><?php echo $row['title']; ?></h3>  
    <p><em class='genre'><?php echo $row['genre']; ?></em></p>  
    <p class='description'><?php echo $row['description']; ?></p>  
   </div>  
  <?php  
  }  
  ?>  
 </div>  

 <div id='edit_dialog'>  
  <form action='edit.php' method='post'>  
   <input type='hidden' name='id' />  

   Title:   
   <input type='text' name='title' /><br />  

   Genre:  
   <select name='genre'>  
    <option value='fantasy'>Fantasy</option>  
    <option value='mystery'>Mystery</option>  
    <option value='nonfiction'>Nonfiction</option>  
   </select><br />  

   Description:  
   <textarea name='description' cols='30' rows='3'></textarea>    
  </form>  
 </div>  
</body>  
</html>

您可能希望尝试以下操作以找出哪里出了问题：

$.ajax({
  error: function() { 
      //alert any errors here 
  }
});

另外，我也不太确定返回错误部分是否会阻止您的表单正常发布，我认为e.preventDefault是最佳做法。如果我错了，请纠正我，我不是javascript大师

>>我想它不会进入edit.php页面。：-\检查浏览器控制台中的答案，同时检查apache/nginx error.log，我想您在edit.php中有错误