表单未在Ajax中提交，但未从php返回html数据
[英]Form is not submitting in ajax returned html data from php
问题描述
一共有三个文件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 个解决方案
解决方案1
1 已采纳 2016-02-17 08:06:02
您的整个代码混乱不堪，需要更加井井有条，您犯了一些基本错误：
1-每次显示新街道时，您都要添加新页面，这是因为要将服务器端页面与搜索页面混合在一起，并且要解决此问题，因此必须将它们分开，因此要进行搜索的页面与要显示的页面是一样的。
2-最好有一个核心的Ajax函数来处理所有请求，然后您可以通过Ajax处理搜索动作和删除动作，在这种情况下，您将不需要使用表格进行删除，并且可以解决问题， 或者因为您将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);
?>
使用AJAX提交HTML表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.