使用AJAX和POST方法在PHP中获取HTML值_Php_Jquery_Ajax

使用AJAX和POST方法在PHP中获取HTML值

php jquery ajax

使用AJAX和POST方法在PHP中获取HTML值,php,jquery,ajax,Php,Jquery,Ajax,首先，我应该说我对服务器端编程非常陌生。我正在尝试使用AJAX对其更改进行评估我的AJAX代码ajaxCode.php $(document).ready(function() { $('select[name="selectBox"]').change(function(){ var value = $(this).val(); $.ajax({ type: 'POST',

首先，我应该说我对服务器端编程非常陌生。我正在尝试使用AJAX对其更改进行评估

我的AJAX代码ajaxCode.php

  $(document).ready(function() {
        $('select[name="selectBox"]').change(function(){
            var value = $(this).val();
            $.ajax({
                    type: 'POST',
                    url: 'calculator.php', 
                    data: {valueChange: value },
                    dataType: 'html'
            });
            alert(value );
        });
    });

使用select box calculator.php查看我的HTML代码

   <select name ="selectBox">   
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
    </select> 

<?php
$status = $_POST['changeStatus'];
echo $status;
?>

<?php
    $status = $_POST['changeStatus'];
    echo $status;
?>

这似乎不起作用。该状态将发出警报，但不会回显。我做错了什么？提前感谢？

您可能希望通过ajax发送所选框的值，然后更改从ajax获得的状态

服务器站点：calculator.php

   <select name ="selectBox">   
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
    </select> 

<?php
$status = $_POST['changeStatus'];
echo $status;
?>

<?php
    $status = $_POST['changeStatus'];
    echo $status;
?>

客户端：

<script>
$(document).ready(function() {
    $('select[name="selectBox"]').change(function(){
        var value = $(this).val();
        $.ajax({
                type: 'POST',
                url: 'calculator.php', 
                data: {valueChange: value },
                dataType: 'html'
        }).done(function(response){
           $('.response-holder').html(response);
        });
    });
});
</script>

<select name ="selectBox">   
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select> 
<div class="response-holder"></div>

接收ajax调用的代码应该在它自己的文件中，并且只回显您需要检索的内容，而不是您开始使用的全部内容。例如，只需回显状态

假设这是您的HTML

<select name ="selectBox">   
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select> 

<script>
$(document).ready(function() {
    $('select[name="selectBox"]').change(function(){
        var value = $(this).val();
        $.ajax({
                type: 'POST',
                url: 'calculator.php', 
                data: {valueChange: value },
                dataType: 'html'
        });
        alert(value );
    });
});
<script>

那么这可能是您的calculator.php

   <select name ="selectBox">   
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
    </select> 

<?php
$status = $_POST['changeStatus'];
echo $status;
?>

<?php
    $status = $_POST['changeStatus'];
    echo $status;
?>

但是，再一次，您正在进行一个ajax调用，而没有对其响应进行任何处理。要接收calculator.php正在回答的问题，您可以

<select name ="selectBox">   
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select> 
<div id="response"></div>
<script>
$(document).ready(function() {
    $('select[name="selectBox"]').change(function(){
        var value = $(this).val();
        $.ajax({
                type: 'POST',
                url: 'calculator.php', 
                data: {valueChange: value },
                dataType: 'html'
        }).then(function(response) {
           jQuery('#response').html('Ajax answered: '+response);
        });
        alert(value );
    });
});
<script>

这很好用：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">     
      $(document).ready(function() {
           $(document).on("change", ".selectBox", function(){
                var v = $(this).val();
                $.post( "ajax.php", { changeStatus: v , time: "123" }, function( data ) {   
                    alert("From file: " +data);             
                });                 
            });
        });
    </script>   
</head>
<body>
<select name ="selectBox" class="selectBox">   
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select> 
</body>
</html>

和ajax.php

<?php
$status = $_POST['changeStatus'];
echo $status;
?>

在calculator.php脚本中试试这个

<?php
    $status = $_POST['valueChange'];
    echo $status;
?>

这会给你你想要的结果吗？

但是。。。但是您的DOM中已经有了这个选择框，但您也在calculator.php中回显了它。？您希望发生什么？我应该将我的PHP代码放在一个单独的文件中吗？记住，PHP首先运行以生成客户端页面，然后将页面发送给用户。您的代码所做的是生成一个新页面，页面底部带有对AJAX的响应，而您不需要对其进行任何处理。您正在尝试在同步调用后对该值发出警报。使用异步调用：处理此类请求的正确方法是什么？在文件结构方面。Ajax代码是否应该在我的calculator.php文件中。这正是我的回答。不知何故，我的答案太过宽泛，而你的答案对OP来说更清晰易懂。因此，现在选择框的值在客户端的响应保持器中，我可以通过_POST或_get进入另一个php文档来获得该值，对吗？@JonGoe在响应保持器中，你将得到calculator.php中的所有内容。通过_POST或_GET，您将获得在selectbox中选择的内容。这似乎是最适合我的问题的解决方案，但我在实现它时遇到了问题。我可能对如何处理SS有一些重大误解。我的HTML文件包含上面提供的代码。我在div-tag方法中添加了=post。在calculator.php中，我只需通过获取类的值即可。但是，我被告知在php文档中，没有定义响应持有者。为什么会发生这种情况？谢谢。您需要将$_POST['response-holder']更改为$_POST['valueChange']，我正在使用calculator.PHP中的PHP代码和htmlCal.HTML中的HTML+AJAX。当选择一个选项时，会提醒该值，但PHP文件中未定义changeStatus。为什么会这样？谢谢