PHP-POST 没有使用 AJAX 和 jQuery 刷新？ [关闭]

Question

目前我正在使用从 xml 文件中读取数据的 php 脚本。用户首先必须通过使用下拉菜单选择他想要获取更多信息的 xml 条目，然后通过单击提交按钮将表单发送到相同的 php 页面。因为页面重新加载，它能够看到已经通过 POST 发送了一些东西，然后可以在页面底部的这个 xml 条目中显示请求的信息。

但我想让它更易于使用。这个想法是，当有人从下拉列表中选择一个条目时，所请求的信息就会显示出来，而无需单击提交按钮，当然也无需重新加载整个页面。这意味着 POST 表单正在后台发送，并且在从下拉列表中选择项目后会直接显示信息。

我知道使用 jQuery 和 AJAX 可以做到这一点，但我对这些语言中的任何一种都没有真正的经验。有人知道如何解决这个问题吗？ :)

谢谢

Answer 1

将下面的js代码复制到你有下拉菜单的主文件中：-

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>  
<script type="text/javascript">
    $(document).ready(function(){
        $('select').change(function(){
            var dwxvar = $(this).val();
            $.ajax({
              type: "POST",
              url: "http://localhost/dwx/phpcodefile.php",
              data: {dwx:dwxvar},
              cache: false,
              dataType: 'json',
              success: function(data_val){
                alert(data_val);
                $("#result").html(data_val); 
              }
            });
        });
    });
</script>

我假设这是您的下拉菜单：-

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

您必须使用输出所需的唯一代码（php）制作一个单独的 php 文件（例如 phpcodefile.php）：-

<?php
    $varname = $_POST["dwx"]; // this is the same variable which we have sent here data: {dwx:dwxvar},
    // -- now using this value perform whatever action you want to perform below --


    //Next try to put the result in a variable so as to return value to ajax call as we do for functions with return type. Suppose the variable name is **$alldata**
    echo $alldata;      
?>

您在 phpcodefile.php 文件上打印的内容将被返回，您将能够在 alert() 中看到它。这意味着所有数据现在都在“data_val”这里

success: function(data_val){
    alert(data_val);
}

现在您必须将此 data_val 附加到某个标签

<div id="result"></div>

喜欢这个

$("#result").html(data_val); 

尝试以这种方式执行您的代码，它会按照您想要的方式运行。 如果您发现任何问题，那么我需要查看您的完整 html 和 php 代码。

Answer 2

您可以在按钮点击上使用以下代码：-

<div id="result"></div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

jQuery.ajax({
        url:'TO YOUR PHP PAGE',    
        type:'POST',
        data:'id='+id,
        success:function(results)
        {
            jQuery("#result").html(results); 

        }
    });