个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 07:40:06 24 4
gpt4 key购买 nike

共有三个文件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>

街道.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-每次显示新街道时，您都会添加新页面，因为您将服务器端页面与搜索页面混合在一起，并且要解决此问题，您必须将它们分开，因此一个用于搜索的页面和另一个用于搜索的页面显示。

2-最好有一个核心的Ajax功能来处理所有的请求，然后你可以通过Ajax处理搜索 Action 和删除 Action ，这样你就不需要使用表单来删除，问题就来了解决了，或者，因为您将 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);
?>

关于javascript - 表单未在 ajax 从 php 返回的 html 数据中提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35449566/

24 4 0
文章推荐： javascript - 根据选择更改所需输入的邮政编码
文章推荐： php - 输出缓冲区错误处理
文章推荐： sql - 尝试删除重复的图像时出现django.db.utils.IntegrityError
文章推荐： javascript - 我的 "Includes"如何破坏独立 Google Apps 脚本中的表单提交？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com