Ajax 不适用于选择标签、PHP、AJAX

Question

我试图在带有 2 个选项的选择标签上使用 ajax，但由于某种原因它没有得到 $_POST。它会打印出“---”，但不会打印出 $_POST 值，即 1 或 2。我不确定我做错了什么。请看我的代码：

newtest.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type = "text/javascript"> 

function ajax(url,type,theName,id) {

      $.ajax({
           type: "POST",
           url: url,
           data: { select: $(type+'[name='+theName+']').val()},
           error: function(xhr,status,error){alert(error);},
           success:function(data) {
             document.getElementById( id ).innerHTML = data;
           }

      });

}

</script>

<?php

echo "<select name = 'name' onchange = 'ajax(\"newtestx.php\",\"input\",\"name\",\"output\")'>";
echo "<option value = '1'> 1 </option>";
echo "<option value = '2'> 2 </option>";
echo "</select>";

echo "<div id = 'output'></div>";

?>

newtestx.php

<?php

$name = $_POST['name'];
echo $name."---";

?>

Answer 1

您在 AJAX 调用中向服务器发送带有“select”键的 POST 参数：

   data: { select: $(type+'[name='+theName+']').val()},

在 newtestx.php 中，您尝试使用键“name”从 POST 参数中检索值 - 它不存在：

$name = $_POST['name'];

您可以通过为参数键指定相同的名称来轻松解决此问题。如果您要查找 $name = $_POST['select']，就会找到该参数。

内联 Javascript 被认为是不好的做法，没有必要回显 HTML 标记，这会使标记更难使用。

newtest.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="[link to your javascript file here]"></script>
<select name='numbers' class="postValueOnChange" data-id-to-update="output" data-post-url="newtestx.php">
    <option value='1'>1</option>
    <option value='2'>2</option>
</select>
<div id='output'></div>

Javascript 文件

$(document).ready(function () {
    $('.postValueOnChange').change(postSelectedValue);

    function postSelectedValue(e) {
        var $self = $(this);
        var url = $self.data('post-url');
        var $elementToUpdate = $('#' + $self.data('id-to-update'));

        var jqxhr = $.ajax({
            type: "POST",
            url: url,
            data: {
                selected: $self.val()
            }
        });
        jqxhr.done(function (data) {
            $elementToUpdate.html(data);
        });
        jqxhr.fail(function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
        });
    }
});

newtestx.php

<?php
$name = $_POST['selected'];
echo $name."---";
?>

Answer 2

您正在发送帖子参数select 并尝试以$_POST['name'] 接收。

确保它们匹配...name 或 select

Answer 3

首先，既然你用的是jQuery，那你为什么还要用内联javascript呢？

我建议您首先围绕 jQuery change 事件重新构建您的代码：

$(document).ready(function() {
        $('select').change(function(e) {
        e.preventDefault();

        var selected = $('.select option:selected').val();
        var id, theName, url= ...// get it from the DOM 

        $.ajax({
           type: "GET",
           url: url,
           data: { select: selected},
           error: function(xhr,status,error){alert(error);},
           success:function(data) {
             $('#'+id).html(data);
           }

      });


    }); 
}); 

其次，你为什么要用 PHP 编写 HTML，你只会用引号和双引号以及不需要的空格来让自己挣扎和浪费时间。

    <form action="">  
        <select name="name">
        <option value="1">1</option>
        <option value="1">1</option>
        </select>


    </form>

<div id="output"></div>