阿贾克斯不工作的选择标记，PHP，AJAX [英] Ajax not working on select tag, PHP, AJAX

问题描述

我想用ajax在选择标签与2个选项，但它没有得到$ _ POST出于某种原因。它打印出---，但它不会打印出$ _POST价值，这是1或2。我不知道我做错了什么。请看看我的code：

newtest.php

 ＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js＆GT;＆LT; / SCRIPT＆GT ;

＆LT;脚本类型=文/ JavaScript的＆GT;

功能AJAX（URL，类型，theName，ID）{

      $阿贾克斯（{
           键入：POST，
           网址：网址，
           数据：{选择：$（类型+'[NAME ='+ theName +]）VAL（）}，
           错误：函数（XHR，状态，错误）{警报（错误）;}，
           成功：功能（数据）{
             的document.getElementById（id）的.innerHTML =数据;
           }

      }）;

}

＆LT; / SCRIPT＆GT;

＆LT; PHP

回声＆LT;选择名称='名'的onchange ='阿贾克斯（\newtestx.php \，\输入\，\名字\，\输出\），'＆gt;中;
回声＆LT;期权价值='1'＆GT; 1＆LT; /选项＆gt;中;
回声＆LT;期权价值='2'＆GT; 2'; /选项＆gt;中;
回声＆LT; /选择＆g​​t;中;

回声＆LT; D​​IV ID ='输出'＆GT;＆LT; / DIV＆gt;中;

？＆GT;
 

newtestx.php

 ＆LT; PHP

$名称= $ _ POST ['名称'];
回声$名称---。

？＆GT;
 

解决方案

正在发送POST参数与键选择在你的AJAX调用服务器：

 数据：{选择：$（类型+'[NAME ='+ theName +]）VAL（）}，
 

在newtestx.php你正在尝试从一个POST参数与键name的价值 - 它不存在：

  $ name = $ _ POST ['名称'];
 

您可以通过给参数键相同的名称很容易地解决这个问题。如果你能看到$ 名称= $ _ POST ['选择'] 参数会被发现。

内联JavaScript被认为是不好的做法，有没有必要呼应了HTML标记，它使标记了更难的工作。

newtest.php

 ＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js＆GT;＆LT; / SCRIPT＆GT ;
＆LT;脚本SRC =[链接到你的javascript文件在这里]＆GT;＆LT; / SCRIPT＆GT;
＆LT;选择名称='号'级=postValueOnChange数据ID到更新=输出数据后的URL =newtestx.php＆GT;
    ＆LT;期权价值='1'＆GT; 1＆LT; /选项＆GT;
    ＆LT;期权价值='2'＆GT; 2'; /选项＆GT;
＆LT; /选择＆GT;
＆LT; D​​IV ID ='输出'＆GT;＆LT; / DIV＆GT;
 

JavaScript文件

  $（文件）。就绪（函数（）{
    $（'。postValueOnChange）改变（postSelectedValue）;

    功能postSelectedValue（五）{
        变量$自我= $（本）;
        VAR URL = $ self.data这样的（后的URL）;
        变量$ elementToUpdate = $（'＃'+ $ self.data这样（'身份证到更新'））;

        VAR jqxhr = $阿贾克斯（{
            键入：POST，
            网址：网址，
            数据： {
                选择：$ self.val（）
            }
        }）;
        jqxhr.done（功能（数据）{
            $ elementToUpdate.html（数据）;
        }）;
        jqxhr.fail（功能（jqXHR，textStatus，errorThrown）{
            警报（errorThrown）;
        }）;
    }
}）;
 

newtestx.php

 ＆LT; PHP
$名称= $ _ POST ['选择'];
回声$名称---。
？＆GT;
 

I'm trying to use ajax on a select tag with 2 options, but it's not getting the $_POST for some reason. It prints out the "---", but it does not print out the $_POST value, which is either 1 or 2. I'm not sure what I did wrong. Please take a look at my code:

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."---";

?>

解决方案

You are sending a POST parameter with the key "select" to the server in your AJAX call:

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

In newtestx.php you are trying to retrieve the value from a POST parameter with the key "name" - which doesn't exist:

$name = $_POST['name'];

You could fix this easily by giving the parameter keys the same name. If you would look for $name = $_POST['select'] the parameter would be found.

Inline Javascript is considered bad practice and there's no need to echo out the HTML markup, it makes the mark up harder to work with.

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 file

$(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."---";
?>

这篇关于阿贾克斯不工作的选择标记，PHP，AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！