Fatal编程技术网
  • php/
  • Php 如何使用ajax提交内联编辑？

Php 如何使用ajax提交内联编辑？

php jquery ajax

Php 如何使用ajax提交内联编辑？,php,jquery,ajax,Php,Jquery,Ajax,如何使用ajax提交此表单 <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script> <script type="text/javascript" src="js/jquery.qtip-1.0.0.mi

如何使用ajax提交此表单

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip-1.0.0.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
      $(".edit").click(function(){
          var tr = $(this).closest("tr");
          var submit = "<input type='submit' name='Submit' value='Submit' />";

          tr.find(".td").each(function(){
              var name = $(this).attr("title");
              var value = $(this).html();
              var input = "<input type='text' name='"+name+"' value='"+value+"' />";
              $(this).html(input);
          });

          tr.find(".button").html(submit);

      });
  });

// this is the id of the submit button
$(".button").click(function() {    

$.ajax({
       type: "POST",
       url: "index.php?page=update_mysql",
       data: $("#change").serialize(), // serializes the form's elements.
       success: function(data)
       {
           alert(data); // show response from the php script.
       }
     });

return false; // avoid to execute the actual submit of the form.
});
</script>

<form id="change" method="post" action="#">
    <table>

<?PHP
$sql="SELECT * FROM names";
$result = mysql_query($sql)or die(mysql_error());
  WHILE ($row = mysql_fetch_array($result, MYSQL_ASSOC))  {
        echo '<tr class="row">';
            echo '<td class="td" title="id">'.$row["id"].'</td>';
            echo '<td class="td" title="first_name">'.$row["first_name"].'</td>';
            echo '<td class="td" title="last_name">'.$row["last_name"].'</td>';
            echo '<td class="button" title="button"><button class="edit">Edit</button></td>';
        echo '</tr>';
  }
?>

    </table>
</form>
现在它从mysql查询创建一个表。当您单击行后面的Edit按钮时，Javascript将所有单元格设置为input=text

现在，当您单击行末尾的Submit按钮时，我希望它通过ajax将编辑后的数据提交到mysql

我不明白在哪里可以得到我需要用ajax发布的数据

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip-1.0.0.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
      $(".edit").click(function(){
          var tr = $(this).closest("tr");
          var submit = "<input type='submit' name='Submit' value='Submit' />";

          tr.find(".td").each(function(){
              var name = $(this).attr("title");
              var value = $(this).html();
              var input = "<input type='text' name='"+name+"' value='"+value+"' />";
              $(this).html(input);
          });

          tr.find(".button").html(submit);

      });
  });

// this is the id of the submit button
$(".button").click(function() {    

$.ajax({
       type: "POST",
       url: "index.php?page=update_mysql",
       data: $("#change").serialize(), // serializes the form's elements.
       success: function(data)
       {
           alert(data); // show response from the php script.
       }
     });

return false; // avoid to execute the actual submit of the form.
});
</script>

<form id="change" method="post" action="#">
    <table>

<?PHP
$sql="SELECT * FROM names";
$result = mysql_query($sql)or die(mysql_error());
  WHILE ($row = mysql_fetch_array($result, MYSQL_ASSOC))  {
        echo '<tr class="row">';
            echo '<td class="td" title="id">'.$row["id"].'</td>';
            echo '<td class="td" title="first_name">'.$row["first_name"].'</td>';
            echo '<td class="td" title="last_name">'.$row["last_name"].'</td>';
            echo '<td class="button" title="button"><button class="edit">Edit</button></td>';
        echo '</tr>';
  }
?>

    </table>
</form>


$（文档）.ready（函数（）{
$（“.edit”）。单击（函数（）{
var tr=$（此）.tr；
var submit=“”；
tr.find（“.td”）.each（函数（）{
var name=$（this.attr（“title”）；
var value=$（this.html（）；
var输入=”；
$（this）.html（输入）；
});
tr.find（“.button”）.html（提交）；
});
});
//这是提交按钮的id
$（“.button”）。单击（函数（）{
$.ajax({
类型：“POST”，
url:“index.php？page=update\u mysql”，
数据：$（“#更改”）.serialize（），//序列化表单的元素。
成功：功能（数据）
{
警报（数据）；//显示来自php脚本的响应。
}
});
return false；//避免执行表单的实际提交。
});
update_mysql.php如下所示：

<?php
include 'firewall.php';
if ($_POST['Submit'] == "Submit") {
$id = $_POST['id'];
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$sql_edit = "UPDATE names SET first_name = '$first_name', last_name = '$last_name' WHERE id = '$id'";
$result_edit = mysql_query($sql_edit) or die(mysql_error());

}

?>

您可以使用：

试试这个


$(document).ready(function(){
  $(".edit").click(function(){
    var tr = $(this).closest("tr");

    tr.find(".td").each(function(){
      var name = $(this).attr("title");
      var value = $(this).html();
      var input = "<input type='text' name='"+name+"' value='"+value+"' />";
      $(this).html(input);
    });

    var submit = "<input type='button' name='Submit' value='Submit' />";
    tr.find(".button").html(submit);

  });
});

$(".button input[type=button]").live('click', function() {
  var data = $('form#change').serialize();
  // post data using ajax                                                                                                                                                                         
  $.ajax({
    type: "POST",
    url: "index.php?page=update_mysql",
    data: data,
    success: function(data) {
      alert(data); // show response from the php script.                                                                                                                                          
    }
  });
});



$（文档）.ready（函数（）{
$（“.edit”）。单击（函数（）{
var tr=$（此）.tr；
tr.find（“.td”）.each（函数（）{
var name=$（this.attr（“title”）；
var value=$（this.html（）；
var输入=”；
$（this）.html（输入）；
});
var submit=“”；
tr.find（“.button”）.html（提交）；
});
});
$（“.button输入[type=button]”）.live（'click'，function（）{
var data=$（'form#change'）.serialize（）；
//使用ajax发布数据
$.ajax({
类型：“POST”，
url:“index.php？page=update\u mysql”，
数据：数据，
成功：功能（数据）{
警报（数据）；//显示来自php脚本的响应。
}
});
});


注意：我已将提交按钮的“type”属性更改为“type='button'”。这将不会触发浏览器的默认提交。同一个按钮用于收集表单数据并使用ajax提交

快乐编码

编辑：


它将带您进入“index.php？page=my#u page”，因为在您单击
时会提交表单。你没有把它改成
吗？当提交表单时不需要提交按钮。还有其他非提交按钮可用于绑定javascript处理程序。
请显示一些与此相关的HTML，总是有帮助的！我认为你误解了他的问题。一旦用户单击编辑，输入就会用jQuery添加。添加了一些我尝试过但不起作用的ajax。使用firebug或chrome开发工具查看发送的内容和返回的内容。另外，您是否收到任何错误？请在：$（“.button”）之后立即放置一个警报。单击（function（）{alert（1）…并查看它是否显示，以确保单击事件实际发生。我看到了问题，您使用类按钮将事件绑定到td。您需要将其绑定到提交：$（'form'）。提交（..现在，当我单击编辑按钮时，它会转到'index.php？page=my_page#'。此代码立即将单元格拆分为input=text函数。在触发submit的绑定机制中进行了一些编辑，使格式函数保持不变。看看是否有帮助。现在我可以单击编辑按钮并更改输入字段，但当我单击submit时，仍然需要修改“index.php？page=my_page#”这里需要什么操作？#，空还是其他？$（“#提交”）.live（'click'，function（）{alert（1）