表单不是从Ajax提交的返回的HTML数据中提交的

时间：2016-02-17 06:37:30

标签： javascript php jquery ajax forms

有三个文件 1.street_master.php 2.street.php 3.streetdelete.php

street_master.php具有添加新街道（街道名称，街道代码）的形式，当使用ajax调用新街道添加提交时，并且数据库中的街道列表以表格格式打印（个别删除选项删除由streetdelete.php文件）在同一页面上是street_master.php。但删除选项不起作用。实际上表单没有提交哪个重定向到streetdelete.php

streetmaster.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>

street.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> ";


    }


    ?>

streetdelete.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>";
?>

但如果我们单独运行street.php，则表示提交到streetdelete.php

1 个答案:

答案 0 :(得分：1)

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

1-每次显示新街道时都会添加新页面，因为您要将服务器端页面与搜索页面混合并修复必须将它们分开，所以需要搜索一个页面，另一个页面用于搜索展示。

2-最好有一个核心Ajax函数来处理所有请求，然后您可以通过Ajax处理搜索操作和删除操作，在这种情况下，您不需要使用表单进行删除，问题将是解决了， OR 因为你将Jquery包含在你的项目中，所以不需要拥有自己的Ajax核心函数，因为Jquery已经为你完成了这个，所以你可以在你想要的任何地方调用Ajax请求首选参数。

所以你的代码如下：

第一页： streets.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页： searchstreet.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>";
}

<强> deletestreet.php 

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