使用Ajax请求编辑行

Editing a row using an Ajax request

本文关键字：编辑 请求 Ajax 使用      更新时间：2024-03-24

这里我展示了4个文件，我使用这些文件通过从数据库中获取数据来编辑表的行。

第一个文件是DataAdministration.php。当加载这个文件时，应该显示#loading_Page7，点击#EditForms后，我需要显示#Loadg_Page8div。当它第一次显示时，我需要将DisplayData.php加载到#loading_Page8div中。为了支持这一点，我使用了Update.js文件。加载DisplayData.php后，我需要通过单击编辑链接来编辑选定的行。然后需要在相关的FormName列中显示可编辑的输入框。我需要使用单独的文件，而不是像在这里使用的那样将它们写在同一个文件中。但点击编辑链接后，ajax请求不会发送到UpdateData.php文件。

我已经处理这个问题很多天了，但还没能解决。这是一个很长的问题。但请有人好心地表明我的错误。

<html>
    <head>
        <script type='text/javascript' src='Update.js'></script>
        <script src="jquery-1.10.2.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#Loading_Page8").hide();
                $("#EditForms").click(function(){
                    $("#Loading_Page7").hide();
                    $("#Loading_Page8").show();
                    ABC();
                    C();
                    return false;
                });
            });
        </script>
    </head>
    <body>          
        <div id="Loading_Page7" >
            <div id="EditForms" class="AddUser">
                <li><a href=""><span>Edit/Delete Forms</span> </li></a>
            </div>
        </div>
        <div id="Loading_Page8">
            <div class="User" style="color:#0B173B">Forms_Available_to_Collect_Pubic_Health_Information </div>
            <div id="DisplayFormDetails" style="position:absolute; top:100px; width:1000px;"> 
            </div>
        </div>
    </body>
</html>

这是Update.js文件

function ABC(){
    $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "DisplayData.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#DisplayFormDetails").html(response); 
            //alert(response);
        }
    });
    C();
}
function C() {
    $(".FormEdit").click(function(){
        var B=$(this).attr('id');//ID comming is FormEdit3. And now B==4
        var NumericValue=B.replace("FormEdit","");
        $.ajax({
            type:"POST",
            url:"UpdateData.php",
            data:{ NumericValue : NumericValue },
            success:function(data){
                $("#FormName"+NumericValue).html(data);
            },
            error: function (err){ 
                alert(err.responseText)
            }
        });
    });
}

这是DisplayData.php

<?php
    include 'connectionPHP.php';
    $result=mysqli_query($con,"SELECT * FROM Form");
    echo "<table border='1' >
        <tr style='background-color:#D0A9F5;' height='40px;'>
            <th width='100px;'>Form ID</th>
            <th width='420px;'>Form Name</th>
            <th width='70px;'>Edit</th>
        </tr>";
    $i=1;
    while($row = mysqli_fetch_array($result)) {         
        $w=$row['Form_ID'];
        echo "<tr height='25px;'>";
        echo "<td name='FormID' id='FormID ".$i."' align=center>$row[Form_ID] </td>";
        echo "<td name='FormName' id='FormName".$i."' align=left>$row[Form_Name]</td>";
        echo "<td class='FormEdit' id='FormEdit".$i."' align=center><a href='' align=left>Edit</a></td>";
        echo "</tr>";
        $i++;
    }
    echo "</table>";                
?>

以及Finally UpdateData.php文件。

<?php
    include 'connectionPHP.php';
    if(isset($_POST['NumericValue'])) {
        $uid = $_POST['NumericValue'];
        echo $uid;
        $query ="SELECT * FROM Form WHERE Form_ID='$uid' ";
        $FetchResults=mysqli_query($con,$query);
        while($row=mysqli_fetch_array($FetchResults)) {
            $FormName=$row['Form_Name'];
            echo '<input type="text" value="$FormName"></input>';
        }       
    }
?>

在位于function C(){..}内部的click处理程序中对UpdateData.php的调用。单击#EditForms时仅调用C()是不够的。

此外，我不认为.FormEdit在任何地方被使用。

编辑：

function C() {
  var NumericValue = $("#DisplayFormDetails table tr").length;
  $.ajax({
    type: "POST",
    url: "UpdateData.php",
    data: {
      "NumericValue": NumericValue
    },
    success: function (data) {
      $("#FormName" + NumericValue).html(data);
    },
    error: function (err) {
      alert(err.responseText)
    }
  });
}
相关文章：