提交而不重新加载页面
[英]Submit Without Page Reload
问题描述
I have 2 dropdowns as below;
我有 2 个下拉菜单，如下所示；
<div class="form-group">
<label>Category</label>
<select class="form-control bg-dark btn-dark text-white" id="drpcategory" name="drpcategory" onchange="submit()" required>
<?php
$category = ''.$dir.'/template/post/category.txt';
$category = file($category, FILE_IGNORE_NEW_LINES);
foreach($category as $category)
{
echo "<option value='".$category."'>$category</option>";
}
?>
</select>
</div>
<div class="form-group">
<label>Item</label>
<select class="form-control bg-dark btn-dark text-white" id="drpitem" name="drpitem">
<?php
$category = $_POST['drpcategory'];
$item = ''.$dir.'/template/post/'.$category.'/item.txt';
$item = file($item, FILE_IGNORE_NEW_LINES);
foreach($item as $item)
{
echo "<option value='".$item."'>$item</option>";
}
?>
</select>
</div>
The drpitem dropdown is populated according to the selection made by the drpcategory dropdown. drpitem下拉列表根据drpcategory下拉列表所做的选择进行填充。 Currently I can catch the $category variable in drpitem by $_POST['drpcategory'] and it works.目前我可以通过$_POST['drpcategory']捕获drpitem的$category变量并且它可以工作。 But the problem is that I use submit() function for the onchange event in drpcategory , so that the whole page simply reloads and then drpitem gets populated as expected.但问题是我对drpcategory的onchange事件使用submit()函数，因此整个页面只需重新加载，然后drpitem按预期填充。 This makes the drpcategory to reset back to it's default selection since it doesn't remember what was it's value before the page was reloaded.这使得drpcategory重置回它的默认选择，因为它不记得页面重新加载之前它的值是什么。
How can I catch the $_POST['drpcategory'] in drpitem without reloading the page?我如何能赶上$_POST['drpcategory']在drpitem无需重新加载页面？ I'm trying to stick with PHP and use minimum amount of JavaScript if required.如果需要，我试图坚持使用 PHP 并使用最少量的 JavaScript。
This question was later updated and answered here : AJAX POST & PHP POST In Same Page这个问题后来更新并在这里回答： AJAX POST & PHP POST In Same Page
3 个解决方案
解决方案1
1 2019-03-01 07:58:07
Once the vital piece of information is know it is quite simple and no doubt you could have found other examples of chained select using ajax but an untested example could be of use/interest.一旦知道重要的信息，它就非常简单，毫无疑问，您可以找到其他chained select using ajax的chained select using ajax示例，但未经测试的示例可能有用/有趣。
The change event fires the ajax request to the same php page in this case - the php at the top of the script processes this POST request and uses the POST data to build the path to the next menu source file.在这种情况下， change事件将 ajax 请求触发到同一个 php 页面 - 脚本顶部的 php 处理这个 POST 请求并使用 POST 数据构建到下一个菜单源文件的路径。
<?php
/* top of same page to the javascript/html */
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['drpcategory'] ) ){
ob_clean();
$category=$_POST['drpcategory'];
$path=$dir.'/template/post/'.$category.'/item.txt';
$item = file($path, FILE_IGNORE_NEW_LINES);
foreach( $item as $item ) printf('<option value="%s">%s',$item,$item);
exit();
}
?>
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>chained select</title>
<script>
const ajax=function( params ){
let xhr=new XMLHttpRequest();
with( xhr ){
onreadystatechange=function(e){
if( this.status==200 && this.readyState==4 ){
document.querySelector('select[name="drpitem"]').innerHTML=this.response
}
}
open( 'POST', location.href, true );
setRequestHeader('Content-Type','application/x-www-form-urlencoded');
send( params );
}
}
document.addEventListener('DOMContentLoaded', event=>{
document.querySelector('select[name="drpcategory"]').addEventListener('change',e=>{
e.preventDefault();
ajax( 'drpcategory='+e.target.value );
},false);
},false );
</script>
</head>
<body>
<div class="form-group">
<label>Category</label>
<select class="form-control bg-dark btn-dark text-white" name="drpcategory" required>
<?php
$category = $dir.'/template/post/category.txt';
$category = file($category, FILE_IGNORE_NEW_LINES);
foreach($category as $category) {
printf('<option value="%s">%s',$category,$category);
}
?>
</select>
</div>
<div class="form-group">
<label>Item</label>
<select class="form-control bg-dark btn-dark text-white" name="drpitem"></select>
</div>
</body>
</html>
解决方案2
0 2019-03-01 07:13:13
You can put the value of the first Dropdown in a session.您可以将第一个 Dropdown 的值放在会话中。
Then on submit you can simply set the first dropdown value to the value in the session.然后在提交时，您可以简单地将第一个下拉值设置为会话中的值。
No change on the submit handling required无需更改提交处理
解决方案3
0 2019-03-01 07:35:33
You can have an if condition in the foreach statement.您可以在 foreach 语句中使用 if 条件。
foreach($category as $category_item)
{
if ($_POST['drpcategory'] == $category_item) {
echo "<option selected value='".$category_item."'>".$category_item."</option>";
} else {
echo "<option value='".$category_item."'>".$category_item."</option>";
}
}
I see your foreach statement is not correct in syntax.我看到您的 foreach 语句在语法上不正确。 Do not use the same variable name for the list and the item.不要为列表和项目使用相同的变量名称。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.