Javascript 在html表单中输入ID，并在同一页面中从MySQL数据库加载相关数据_Javascript_Php_Jquery_Html_Mysql

Javascript 在html表单中输入ID，并在同一页面中从MySQL数据库加载相关数据

javascript php jquery html mysql

Javascript 在html表单中输入ID，并在同一页面中从MySQL数据库加载相关数据,javascript,php,jquery,html,mysql,Javascript,Php,Jquery,Html,Mysql,我有一个表单，其中有一个用户ID的输入字段。根据输入的UID，当用户单击btnLoad时，我希望加载与该用户ID相关的同一页面上的数据。数据存储在MySQL数据库中。我尝试了几种方法，但都没能成功。问题不是从数据库中获取数据，而是将输入字段中的值获取到php脚本中，以便在语句/查询中使用。到目前为止我所做的：我有一个带有输入字段txtest的表单和一个按钮btnLoad来触发一个ajax调用，该调用启动php脚本并传递txtest的值。我在同一页上有一个div，php脚本的结果将在其中得到

我有一个表单，其中有一个用户ID的输入字段。根据输入的UID，当用户单击

btnLoad

时，我希望加载与该用户ID相关的同一页面上的数据。数据存储在MySQL数据库中。我尝试了几种方法，但都没能成功。问题不是从数据库中获取数据，而是将输入字段中的值获取到php脚本中，以便在语句/查询中使用。到目前为止我所做的：我有一个带有输入字段

txtest

的表单和一个按钮

btnLoad

来触发一个ajax调用，该调用启动php脚本并传递txtest的值。我在同一页上有一个div，php脚本的结果将在其中得到响应。
当我点击按钮时，什么也没发生

Test.html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>  
<script>
//AJAX CALL
function fireAjax(){
            $.ajax({
                url:"testpassvariable.php",
                type:"POST",
                data:{userID:$("#txtTest").val(),},
                success: function (response){
                    $('#testDiv').html(response);
                }
            });
        }
</script>
</head>
<body>
<form name="testForm" id="testForm" action="" method="post" enctype="application/x-www-form-urlencoded">
<input type="text" name="txtTest" id="txtTest"/>
<input type="button" id="btnLoad" name="btnLoad" onclick="fireAjax();"
<input type="submit" name="SubmitButton" id="SubmitButton" value="TEST"/>
</form>
<div id="testDiv" name="testDiv">
</div>
</body>


//AJAX调用
函数fireAjax（）{
$.ajax({
url:“testpassvariable.php”，
类型：“POST”，
数据：{userID:$（“#txtest”）.val（），}，
成功：功能（响应）{
$（'#testDiv'）.html（响应）；
}
});
}
这是非常基本的，但应该能帮你度过难关
改变
<input type="button" id="btnLoad" name="btnLoad" onclick="fireAjax();"/> 

//action.php
header('Content-type: application/json; charset=utf-8');
echo json_encode(array(
     'a' => $b[5]
));

   //Connect to DB
    $db = mysql_connect("localhst","user","pass") or die("Database Error");
    mysql_select_db("db_name",$db);

    //Get ID from request
    $id = isset($_GET['id']) ? (int)$_GET['id'] : 0;

    //Check id is valid
    if($id > 0)
    {
        //Query the DB
        $resource = mysql_query("SELECT * FROM table WHERE id = " . $id);
        if($resource === false)
        {
            die("Database Error");
        }

        if(mysql_num_rows($resource) == 0)
        {
            die("No User Exists");
        }

        $user = mysql_fetch_assoc($resource);

        echo "Hello User, your number is" . $user['number'];
    }

正如文档中所说的“在文档准备就绪之前，页面无法安全操作”，请尝试以下操作：
<script>
$(document).ready(function(){
    //AJAX CALL
    function fireAjax(){
        $.ajax({
            url:"testpassvariable.php",
            type:"POST",
            data:{userID:$("#txtTest").val(),},
            success: function (response){
                $('#testDiv').html(response);
            }
        });
    }
});
</script>


$（文档）.ready（函数（）{
//AJAX调用
函数fireAjax（）{
$.ajax({
url:“testpassvariable.php”，
类型：“POST”，
数据：{userID:$（“#txtest”）.val（），}，
成功：功能（响应）{
$（'#testDiv'）.html（响应）；
}
});
}
});
您需要纠正两件事：
1） 需要添加$（document）.ready（）

当您在页面中包含jQuery时，它会自动遍历所有HTML元素（表单、表单元素、图像等）并绑定它们
这样我们就可以进一步激发他们的任何事件
如果不包括$（document）.ready（）
，则不会执行此遍历，因此不会触发任何事件
更正代码：
<script>
$(document).ready(function(){
    //AJAX CALL
    function fireAjax(){
        $.ajax({
            url:"testpassvariable.php",
            type:"POST",
            data:{userID:$("#txtTest").val(),},
            success: function (response){
                $('#testDiv').html(response);
            }
        });
    }
});
</script>

2） 按钮的HTML不正确：
更改：
<input type="button" id="btnLoad" name="btnLoad" onclick="fireAjax();"

$.ajax({
url:“testpassvariable.php”，
类型：“POST”，
数据：{
userID:$（“#txtest”）.val（），
},
数据类型：text，//尝试以下操作：-
我认为错误就在这里：-（你这样写的）
但应该是这样的：-
data:{userID:$("#txtTest").val()}

快乐编码：-）
adddataType:text，
您应该很好，谢谢您的输入！我觉得很清楚，它应该可以工作，但由于某种原因，当我单击btnLoad
时，什么也没有发生。我已经在php脚本中添加了echo“用户ID是：”$player；，只是为了测试$player是否不包含任何值，或者php脚本是否未在div中运行/回显。是后者。。。
$(function(){
// Your code
});

<input type="button" id="btnLoad" name="btnLoad" onclick="fireAjax();"

<input type="button" id="btnLoad" name="btnLoad" onclick="fireAjax();"/>

$.ajax({
    url: "testpassvariable.php",
    type: "POST",
    data: {
        userID: $("#txtTest").val(),
    },
    dataType: text, //<-add
    success: function (response) {
        $('#testDiv').html(response);
    }
});

$(document).ready(function(){
$("#btnLoad").click(function(){
$.post({"testpassvariable.php",{{'userID':$("#txtTest").val()},function(response){
 $('#testDiv').html(response);
}
});
});
});

 data:{userID:$("#txtTest").val(),}

data:{userID:$("#txtTest").val()}