1

编辑:这个问题相当复杂,大多数来这里作为示例(见标题)的人可能会感到失望。

因此,OP 创建了一个特殊的答案,其中包含一个使用 jQuery 进行操作的简单示例(参见标题)。

为了节省您的时间,这就是现在选择的答案(之前选择的答案是 OP 自己对原始问题的解决方案,所以没有伤害)。

如果这听起来像你要找的东西,你为什么还在读这个胡言乱语?去看看那个答案。


第一部分——

我认为这必须通过 Ajax/JQuery 来完成,但我需要帮助。这是我必须做的一个非常简化的示例。

MySQL DB 包含一个名为 USERS 的表,其中包含以下字段:
first_name
last_name
email
admin_level

下面的表格将允许更改指定用户的上述信息。用户列在 HTML 下拉列表中。下拉列表是通过 PHP 脚本从 MySQL 检索值填充的,但在此示例中已被硬编码以简化示例。

首先,操作员在下拉列表中选择用户名。然后,onchange 事件应该触发一个 jQuery(?) 脚本,该脚本将轮询数据库并获取所选用户的上述信息,然后填充下面的表单字段。

<div id="whiteboard"></div><br />
<br />
<form action="" method="POST" id="myform">
    <ul>
    <li>
        Choose Account:<br />
        <select name='staff_pick' style='width:200px;' onchange=get();>
            <option value = '1'>John Smith</option>
            <option value = '2'>Jane Doe</option>
            <option value = '3'>Bob Barker</option>
        </select>
    </li>
    <li>
        First Name:<br />
        <input type="text" name="first_name" id="first_name">
    </li>
    <li>
        Last Name:<br />
        <input type="text" name="last_name">
    </li>
    <li>
        Email:<br />
        <input type="text" name="email">
    </li>
    <li>
        Admin Level:<br />
        <input type="text" name="admin_level" value="3">
    </li>
    <li>
        <input type="submit" value="Update">
    </li>
    </ul>
</form>

否则,如果有人能指出一个与这种情况非常匹配的综合教程,我将不胜感激。

4

4 回答 4

1

你是因为标题而来到这个问题的,你希望它会告诉你如何使用 jQuery 来检测对 html<select>下拉列表的更改,然后使用 AJAX 从 MySQL 数据库中获取值并返回答案。

这是一个有效的、经过测试的示例,可以帮助您入门。

首先,你需要三样东西:

1) 一个 MySQL 数据库,包含:
    1a - 一个名为users
    1b 的表 - 每行需要字段user_id, first_name, last_name
    1c - 一堆数据,有两个或三个名字为Chris
    1d 的用户 - 请注意,上述步骤中的大小写很重要(user_id不是User_ID
    1e - 在步骤 1b 中,您可以创建user_id一个自增字段,类型 = int

2) 一个名为“example.php”的 php 文件,其中包含:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
//alert('Document is ready');

                $('#stSelect').change(function() {
                    var sel_stud = $(this).val();
//alert('You picked: ' + sel_stud);

                    $.ajax({
                        type: "POST",
                        url: "example_ajax.php",
                        data: 'theOption=' + sel_stud,
                        success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
                            $('#LaDIV').html(whatigot);
                            $('#theButton').click(function() {
                                alert('You clicked the button');
                            });
                        } //END success fn
                    }); //END $.ajax
                }); //END dropdown change event
            }); //END document.ready
        </script>
    </head>
<body>

    <select name="students" id="stSelect">
        <option value="">Please Select</option>
        <option value="John">John Doe</option>
        <option value="Mike">Mike Williams</option>
        <option value="Chris">Chris Edwards</option>
    </select>

    <!-- **** The AJAX success fn will place found results into this DIV **** -->
    <div id="LaDIV"></div>

</body>

3) 一个名为的 php 文件,example_ajax.php其中包含:

<?php

//Login to database (usually this is stored in a separate php file and included in each file where required)
    $server = 'localhost'; //localhost is the usual name of the server if apache/Linux.
    $login = 'abcd1234';
    $pword = 'verySecret';
    $dbname = 'abcd1234_mydb';
    mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error());
    mysql_select_db($dbname) or die($connect_error);

//Get value posted in by ajax
    $selStudent = $_POST['theOption'];
    //die('You sent: ' . $selStudent);

//Run DB query
    $query = "SELECT `user_id`, `first_name`, `last_name` FROM `users` WHERE `first_name` = '$selStudent' AND `user_type` = 'staff'";
    $result = mysql_query($query) or die('Fn test86.php ERROR: ' . mysql_error());
    $num_rows_returned = mysql_num_rows($result);
    //die('Query returned ' . $num_rows_returned . ' rows.');

//Prepare response html markup
    $r = '  
            <h1>Found in Database:</h1>
            <ul style="list-style-type:disc;">
    ';

//Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters
    if ($num_rows_returned > 0) {
        while ($row = mysql_fetch_assoc($result)) {
            $r = $r . '<li> ' . $row['first_name'] . ' ' . $row['last_name'] . ' -- UserID [' .$row['user_id']. ']</li>';
        }
    } else {
        $r = '<p>No student by that name on staff</p>';
    }

//Add this extra button for fun
    $r = $r . '</ul><button id="theButton">Click Me</button>';

//The response echoed below will be inserted into the 
    echo $r;

笔记:

<head>a) 我在主文件中包含了 javascript 。通常,我们将 javascript 保存在一个单独的文件中(例如 mycode.js),并且只在主文件中引用它,因此:

<script type="text/javascript" src="mycode.js"></script>

b) 这条线非常重要。没有它,jQuery 不会,ajax 也不会。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

于 2013-04-24T17:26:52.220 回答
0

第二部分——

我在表单上方临时创建了一个 div(“白板”)来显示我从数据库中返回的内容。以下 PHP 脚本 (data3.php) 成功轮询数据库并检索所需数据:

include 'connect_to_db.php';
$id = mysql_real_escape_string($_POST['sent_id']);
$query = "SELECT `fname`, `lname`, `eml`,`priv` FROM `users` WHERE `id`='$id'";
$next_user = mysql_query($query);

echo mysql_fetch_assoc($next_user);

所以数据又回来了,但我无法在 jQuery 中将数据从数组中取出。

在上述 HTML 文档的头部,jQuery/javascript 如下:

function get() {
   $.post('data3.php', {sent_id: myform.staff_pick.value },
      function(bounced) {
         var val0 = bounced[0];
         var val1 = bounced[1];
         var val2 = bounced[2];
         var val3 = bounced[3];
         var val4 = bounced[4];
      $('#whiteboard').html(val0+" "+val1+" "+val2+" "+val3+" "+val4).show();
   });
}

但是...输出不正确。单词“A rra y”被输出到白板 div 中。如何获取 fn(名字)、ln、eml 等值?

然后...我如何将每个断开的返回值放入 myform 表单中的相应输入字段中?

于 2012-08-23T18:48:07.127 回答
0

第 III 部分 - 部分解决方案

必须有更好的(jQuery)方法来分解 jQuery 代码块内的 mysql_fetch_assoc 数组,所以如果有人可以提供帮助,我将不胜感激。

但是,将这个 kludge 写入 DATA3.PHP 文件现在正在工作,我现在在 jQuery 中分解了各个值:

DATA3.PHP 现在是:

//DATA3.PHP
include 'connect_to_db.php';
$id = mysql_real_escape_string($_POST['sent_id']);
$query = "SELECT `fname`, `lname`, `eml`,`priv` FROM `users` WHERE `id`='$id'";
$next_user = mysql_query($query);

$row = mysql_fetch_assoc($next_user);
echo $row['fname']."|".$row['lname']."|".$row['eml']."|".$row['priv'];

主 index.php 文件中的 jQuery 脚本现在是:

function get() {
    $.post('data3.php', {sent_id: myform.staff_pick.value },
        function(bounced) {
            var valNew = bounced.split("|");
            $('#first_name').value = valNew[0] ;
            $('#last_name').value = valNew[1] ;
            $('#email').value = valNew[2] ;
            $('#admin_level').value = valNew[3] ;
            $('#whiteboard').html(valNew[1]).show();
        });
}

我要解决的最后一个问题是输入框(在表单中)仍然不包含每个选定用户的更新值。但是,白板 div 始终包含正确的信息,并为每个新选择的用户正确更新。(我将该命令移到堆栈底部只是为了确保它仍然运行,并且确实如此。)所以,我很困惑。

于 2012-08-23T19:33:08.337 回答
0

最终解决方案:

语法错误......有什么办法。

主 index.php 文件中的 jQuery 脚本现在是:

function get() {
    $.post('data3.php', {sent_id: myform.staff_pick.value },
        function(bounced) {
            var valNew = bounced.split("|");
            $('#first_name').val(valNew[0]) ;
            $('#last_name').val(valNew[1]) ;
            $('#email').val(valNew[2]) ;
            $('#admin_level').val(valNew[3]) ;
            $('#whiteboard').html(valNew[1]).show();
        });
}

您会注意到不正确的语法是:

$('#first_name').value = valNew[0] ;

更正后的语法是:

$('#first_name').val(valNew[0]) ;

我会把这个问题留几天,如果有人有更好的方法来做这件事,请回复。特别是,我想了解我如何才能返回

echo mysql_fetch_assoc($next_user);

在最初的 DATA3.PHP 文件中(请参阅“第 III 部分部分解决方案”)并在 INDEX.PHP 主页面上的 jQuery 中正确处理。

于 2012-08-23T20:14:27.227 回答