我有一个小测试 php 页面，我想将带有 radio 和复选框的表单提交到 process.php，然后结果将发回并显示在同一页面的 #content_result 中，而无需刷新页面。我尝试使用 jQuery Ajax，但是当我点击提交时什么也没有发生。
当我改变 process.php 中的一些东西时问题解决了 :)
这是我的 index.php 代码:
<!Doctype HTML>
<html>
<head>
<title>Test</title>
<meta charset="utf-8"/>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<form action="xuly.php" method="get" id="fil_form">
<input type="radio" name="type" value="numberic" id="type_num"/><label>Numberic Type</label><br>
<input type="radio" name="type" value="character" id="type_char"/><label>Character Type</label><br>
<input type="checkbox" name="zerotonine" value="zero" id="check_zero"/><label>From 0 to 9</label><br>
<input type="checkbox" name="evennumberic" value="even" id="check_even"/><label>Even Number</label><br>
<input type="checkbox" name="oddnumberic" value="odd" id="check_odd "/><label>Odd Number</label><br>
<input type="submit" name="submit_btn" id="submit_btn" value="Submit" />
</form>
<div id="content_result" style="margin-left:5px; width: 990px; min-height: 600px; border:1px solid #000; float:left;">
</div>
<script type="text/javascript">
$(document).ready(function(){
var formsubmit = $("#submit_btn");
formsubmit.click(function(event){
event.preventDefault();
var data = $('form#fil_form').serialize();
$.ajax({
type : 'GET',
url : 'process.php',
data : data,
success : function(data)
{
$('#content_result').html(data);
}
});
});
});
</script>
</body>
</html>这是我的 process.php 代码:
<?php
if($_GET['type']=='numberic'){
if(isset($_GET['zerotonine']) && ($_GET['zerotonine'])=='zero'){
echo '0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9';
}elseif(isset($_GET['evennumberic'])&&($_GET['evennumberic'])=='even'){
echo '0 - 2 - 4 - 6 - 8';
}elseif(isset($_GET['oddnumberic']) && ($_GET['oddnumberic'])=='odd'){
echo '1 - 3 - 5 - 7 - 9';
}
else{
echo '0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9<br>';
echo '0 - 2 - 4 - 6 - 8<br>';
echo '1 - 3 - 5 - 7 - 9<br>';
}
}elseif($_GET['type']=='charactic'){
if(isset($_GET['zerotonine']) && ($_GET['zerotonine'])=='zero'){
echo 'Zero - One - Two - ... - Eight - Nine';
}elseif(isset($_GET['evennumberic'])&&($_GET['evennumberic'])=='even'){
echo 'Zero - Two - Four - Six - Eight';
}elseif(isset($_GET['oddnumberic']) && ($_GET['oddnumberic'])=='odd'){
echo 'One - Three - Five - Seven - Nine';
}
else{
echo 'Zero - One - Two - ... - Eight - Nine<br>';
echo 'Zero - Two - Four - Six - Eight<br>';
echo 'One - Three - Five - Seven - Nine<br>';
}
}
?>这是我在点击提交按钮时得到的网络调试:
最佳答案
您的 PHP 代码是正确的。
问题出在 JavaScript 代码上，当您提交表单时，$('form#fil_form').serialize() 没有包含提交按钮以及其他输入值。
在您的代码中，您要做的第一件事是检查 submit_btn isset($_GET['submit_btn'])，但是 submit_btn 不包含在数组中!。
解决方案可能是以下之一，
- 不是测试
$_GET['submit_btn']，而是测试 GET 是否为空。
或
通过更改此代码将
submit_btn输入添加到 GET 数组:var data = $('form#fil_form').serialize();收件人:
var data = $('#fil_form').serializeArray();data.push({ name: 'submit_btn', value: 'submit_btn' });
关于php - 使用 jQuery ajax 从表单发送数据并显示在另一个 div 中收到的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47102086/