表单未在 ajax 中提交从 php 返回的 html 数据

Form is not submitting in ajax returned html data from php

本文关键字：返回 php html 数据 提交 ajax 表单      更新时间：2023-09-26

有三个文件1.street_master.php 2.街道.php 3.街道删除.php

street_master.php具有添加新街道(街道名称，街道代码(的表单，当使用ajax按下提交时，调用添加了新街道，并且数据库中的街道列表以表格格式打印(带有单独的删除选项删除由Streetdelete完成.php文件(在同一页面上street_master.php.但删除选项不起作用。 实际上表单没有提交重定向到街道删除.php

街长.php

<html>
    <?php include 'conf.php'; ?>
    <head>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="jquery-1.12.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            function showUser()
            {
                var n1=document.getElementById('scode').value;
                var n2=document.getElementById('sname').value;
                var n3=document.getElementById('desc').value;
                var n4=document.getElementById('ward').value;
                if (n1 == null || n1 == "" )
                {
                   alert('fill street code ');
                }
                else if( n2 == null || n2 == "" ) {
                alert('fill street name');
                }
                else
                {
                xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                    }
                }
                var q="?v1="+n1;
                q+="&v2="+n2;
                q+="&v3="+n3;
                q+="&v4="+n4;

                xmlhttp.open("GET","street.php"+q,true);
                xmlhttp.send();
                }
            }
        </script>
    </head>
    <body>
        <center>
            <h2>Street Master</H2>
        </CENTER>
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="control-label col-sm-2">Street code </label>
                <div class="col-sm-1">
                    <input type="number" class="form-control" name="scode" id="scode" required>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">  Street name</label>
                <div class="col-sm-2"> <input type="text" class="form-control" name="sname" id="sname" required> </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2"> Description</label>
                <div class="col-sm-2"> <input type="text" class="form-control" name="desc" id="desc" > </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="ward num"> Ward No </label>
                <div class="col-sm-2">
                    <select name="ward" id="ward" class="form-control">
                        <option value="">chose the ward</option>
                        <?php
                            $s="select  WardNo from ward";
                            $result=$con->query($s);
                            while($row = $result->fetch_assoc())
                            {
                                echo  "<option value='$row[WardNo]'> ward $row[WardNo]</option>";
                            }
                            ?>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2"> </div>
                <div class="col-sm-2"> <input type="button"  class="form-control" value="submit" onClick="showUser()"> </div>
            </div>
        </form>
        <div id="txtHint"></div>
    </body>
</html>

街道.php

<?php
    $q =$_GET['v1'];
    $q1 =$_GET['v2'];
    $q2 =$_GET['v3'];
    $q3 =$_GET['v4'];
    /
     include 'conf.php'; 
    if($con)
    {
       $sql="insert into areacodemaster values('$q','$q1','$q3')";
        $con->query($sql);
        $s="select * from areacodemaster";
        $result=$con->query($s);
        echo "
        <head>
        <link rel='stylesheet' href='scroll.css'>
        <script src='scroll.js'></script>
        </head>
        <body><center>
        <table class='scroll'>
        <thead>
        <tr>
        <th>Street_code</th>
        <th width='70%'>Street_Name</th>
        <th>Ward_Number</th>
        <th>delete</th>
        </tr>
        </thead> ";
        echo "
        <tbody> ";

        while($row = $result->fetch_assoc())
        {
            echo "
            <tr>
            <form action='streetdelete.php' method='post'>
            <td>".$row['Areacode']."</td>
            <td>".$row['Areaname']."</td>
            <td>".$row['WardNo']."</td>
            <td><input type='hidden' name='ac' value='$row[Areacode]'>
            <td><input type='submit' value='Delete'></a></td>
            </form>
            </tr>";
        }
        echo "
        </tbody>
        </table></center>
        </body> ";

    }

    ?>

街道删除.php

<?php
$g=$_POST['ac'];
include 'conf.php';
            $sq="delete from areacodemaster where Areacode='$g'";
            $con->query($sq);
             echo "<script type='text/javascript'>alert('Deleted');         </script>";
?>

但是如果我们运行街道.php则单独表单将提交给StreetDelete.php

你的整个代码一团糟，需要更有条理，你犯过的基本错误：

1-每次显示新街道时，您都会添加新页面，并且由于您将服务器端页面与搜索页面混合在一起，并且要解决此问题，您必须将它们分开，因此一个页面用于搜索，另一个页面用于显示。

2-最好有一个核心Ajax函数

来处理所有请求，然后您可以通过Ajax处理搜索操作和删除操作，在这种情况下，您将不需要使用表单进行删除，问题将得到解决，或者由于您将Jquery包含在您的项目中，因此无需拥有自己的Ajax核心函数，因为Jquery已经为您完成了此操作。您可以使用首选参数在任何您想要的位置调用 Ajax 请求。

所以你的代码将如下所示：

第一页：街道.php(显示现有街道的主页(

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="jquery-1.12.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        function deleteUser(streetCode){
           $.ajax({
           type: "POST",
           url: "deletestreet.php",
           data: {ac: streetCode},
           success: function( msg ){$("#" + streetCode ).remove();alert("Deleted");}
           });
        }
        function showUser(){
            var n1 = $("#scode").val();
            var n2 = $("#sname").val();
            var n3 = $("#desc").val()
            var n4 = $("#ward").val();
            if (n1 == null || n1 == "" ){
                alert('fill street code ');
            }
            else if( n2 == null || n2 == "" ){
                alert('fill street name');
            }
            else{
                $.ajax({
                type: "POST",
                url: "searchstreet.php",
                data: {v1: n1, v2: n2, v3: n3, v4: n4},
                success: function( msg ){$("#txtHint").html(msg);}
                });
            }
    </script>
</head>
<body>
<center><h2>Street Master</h2></center>
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2">Street code</label>
    <div class="col-sm-1">
    <input type="number" class="form-control" name="scode" id="scode" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Street name</label>
    <div class="col-sm-2">
    <input type="text" class="form-control" name="sname" id="sname" required> 
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Description</label>
    <div class="col-sm-2"> 
    <input type="text" class="form-control" name="desc" id="desc" > 
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="ward num">Ward No</label>
    <div class="col-sm-2">
    <select name="ward" id="ward" class="form-control">
    <option value="">chose the ward</option>
    <?php
    $s="select  WardNo from ward";
    $result=$con->query($s);
    while($row = $result->fetch_assoc()){
       echo  "<option value='$row[WardNo]'> ward $row[WardNo]</option>";
    }
    ?>
    </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-2"> </div>
    <div class="col-sm-2"> 
    <input type="button"  class="form-control" value="submit" onClick="showUser()"> 
    </div>
  </div>
</form>
<div id="txtHint"></div>
</body>
</html>

第 2 页：搜索街道.php

<?php
$q = $_GET['v1'];
$q1 =$_GET['v2'];
$q2 =$_GET['v3'];
$q3 =$_GET['v4'];
 include 'conf.php'; 
if($con){
    $sql = "insert into areacodemaster values('$q','$q1','$q3')";
    $con->query($sql);
    $s = "select * from areacodemaster";
    $result=$con->query($s);
    echo "
    <center>
        <table class='scroll'>
            <thead>
              <tr>
                <th>Street_code</th>
                <th width='70%'>Street_Name</th>
                <th>Ward_Number</th>
                <th>delete</th>
              </tr>
            </thead>
            <tbody>";
    while($row = $result->fetch_assoc()){
        echo "
              <tr id='".$row['Areacode']."'>
                <td>".$row['Areacode']."</td>
                <td>".$row['Areaname']."</td>
                <td>".$row['WardNo']."</td>
                <td><input type='button' value='Delete' onclick=deleteUser('".$row['Areacode']."')></td>
              </tr>";
    }
        echo"
            </tbody>
        </table>
    </center>";
}

删除街道.php

<?php
$g = $_POST['ac'];
include 'conf.php';
$sq = "delete from areacodemaster where Areacode='$g'";
$con->query($sq);
?>
相关文章：