如何使用ajax将select标签的值发送到驻留在同一页面上的php
[英]How to send the value of select tag using ajax to php residing on the same page
问题描述
Problem 
问题
I want to use the select tag to select a value and send the value using ajax call to a PHP embedded in the same page. 我想使用select标记来选择一个值，并使用ajax调用将该值发送到嵌入在同一页面中的PHP。
Here, in my code, I am using the select tag and as soon as I select any value from the drop-down, the value is being sent to the javascript and being alerted properly. 在这里，在我的代码中，我正在使用select标记，并且一旦从下拉列表中选择了任何值，该值就会被发送到javascript并得到适当的警报。 But when I $_POST['option'] in PHP and echo it, it is not getting printed on the page. 但是当我在PHP中使用$ _POST ['option']并回显它时，它并没有打印在页面上。
I know PHP is a server-side language and anything written in PHP executes first when a page is loaded. 我知道PHP是一种服务器端语言，并且在页面加载时，任何用PHP编写的内容都会首先执行。
tablesize.php tablesize.php
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0 /jquery.min.js"></script>
<script type="text/javascript">
function fetch_select(val){
$.ajax({
type: 'post',
url: 'tablesize.php',
datatype:'json',
data: {option:val},
success: function (response) {
alert(val);
//document.getElementById("new_select").innerHTML=response;
}
});
}
</script>
</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP</p>
<center>
<div id="select_box">
<select onchange="fetch_select(this.value);">
<option value="10">state</option>
<option value="20">20</option>
</select>
</div>
</body>
</html>
<?php
if(isset($_POST['option'])){
$val=$_POST['option'];
echo $val;
}
?>
Thanks... 谢谢...
4 个解决方案
解决方案1
1 2018-03-31 10:44:43
same page ajax calling and echo value 同一页面的ajax调用和回显值
<?php
session_start();
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("change","#sel",function(){
var val = $(this).val();
console.log(val);
$.ajax({
type: 'post',
url: 'index.php?action=data',
datatype:'json',
data: {"option":val},
success: function (response) {
alert(val);
location.href="index.php";
}
});
});
});
</script>
</head>
<body>
<div id="select_box">
<select id="sel" name="sel">
<option <?php if($_SESSION['val']=="a") echo "selected" ;?> value="a">a</option>
<option <?php if($_SESSION['val']=="b") echo "selected" ;?> value="b">b</option>
<option <?php if($_SESSION['val']=="c") echo "selected" ;?> value="c">c</option>
<option <?php if($_SESSION['val']=="d") echo "selected" ;?> value="d">d</option>
<option <?php if($_SESSION['val']=="e") echo "selected" ;?> value="e">e</option>
<option <?php if($_SESSION['val']=="e") echo "selected" ;?> value="f">f</option>
</select>
</div>
</body>
</html>
<?php
$val = $_POST['option'];
if($_REQUEST['action']=="data"){
$_SESSION['val']=$val;
echo "Selected value = ".$_SESSION['val'];
}elseif ($val=="") {
echo "Selected value = ".$_SESSION['val'];
}
?>
解决方案2
0 2018-03-31 08:57:24
Different ajax.php and write code here and url change in your ajax code. 不同的ajax.php，在此处编写代码，并在ajax代码中更改url。
Ajax.php Ajax.php
<?php
if(isset($_POST['option']))
{
$val=$_POST['option'];
echo $val;
}
?>
Your ajax code... 你的ajax代码...
function fetch_select(val){
$.ajax({
type: 'post',
url: 'ajax.php',
datatype:'json',
data: {option:val},
success: function (response) {
alert(response);
//document.getElementById("new_select").innerHTML=response;
}
});
}
解决方案3
0 已采纳 2018-03-31 09:06:15
Here is your solution 这是您的解决方案
The ajax success contains your result. Ajax成功包含您的结果。 The error is in your printing method. 错误出在您的打印方法中。
You need a different file for ajax here I use ajax.php . 您需要为ajax使用其他文件，这里我使用ajax.php 。
One more thing put scripts at last on HTML page always. 还有一件事情总是将脚本放在HTML页面上。
tablesize.php tablesize.php
<html>
<head>
</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP</p>
<center></center>
<div id="select_box">
<select onchange="fetch_select(this.value);">
<option value="10">state</option>
<option value="20">20</option>
</select>
</div>
<p id="print-ajax"></p><!--Result will print here-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0 /jquery.min.js"></script>
<script type="text/javascript">
function fetch_select(val){
$.ajax({
type: 'post',
url: 'ajax.php',
datatype:'json',
data: {option:val},
success: function (response) {
$('#print-ajax').html(response);//This will print you result
}
});
}
</script>
</body>
</html>
ajax.php ajax.php
echo $_POST['option'];die;
解决方案4
0 2018-03-31 09:11:15
You are printing the wrong variable on ajax post success. 您在ajax发布成功后打印了错误的变量。 You needed response variable to alert of PHP script's output. 您需要response变量来警告PHP脚本的输出。
Also put the PHP post handler block to the top of the page so that HTML contents will not be included in the response for AJAX. 还要将PHP post handler块放在页面顶部，以便HTML内容不会包含在AJAX的响应中。
Updated Code: 更新的代码：
<?php
if(isset($_POST['option'])){
$val=$_POST['option'];
echo $val; exit;
}
?>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function fetch_select (val){
$.ajax({
type: 'post',
url: 'tablesize.php',
datatype:'json',
data: { option:val },
success: function (response) {
alert(response);
}
});
}
</script>
</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP</p>
<center>
<div id="select_box">
<select onchange="fetch_select(this.value);">
<option value="10">state</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.