1

我正在做这个项目,我正在尝试获取返回值,以便我可以根据客户选择的内容自动填充我的输入框。

然而,这段代码没有执行,我不知道为什么。当我删除时,src="jquery area" $(#dropdown).on是一个未定义的方法;不知道该怎么做。

<script  type="text/javascript"  src="http://code.jquery.com/jquery-latest.min.js">
//$.post(url, [data], [callback], [callback type])

    ("#dropdown").on('change', function() {//when you select something from the dropdown function run and will switch the data
        $.post("backgroundScript.php", {
                uid: $(this).val()
            },
             function(data) {
                 $("#first").val(data.first);
               $("#last").val(data.last);
               // etc.;
            }, 'json'
        );

    });
</script>

这是我的完整代码

try {  
  # MySQL with PDO_MYSQL  
  $DBH = new PDO("mysql:host=$hostname;dbname=$database", $username, $password);  
  $DBH->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

  //$DBH->prepare('SELECT first FROM contacts');
}  
catch(PDOException $e) { 
    echo "I'm sorry, I'm afraid I can't do that.";  
    file_put_contents('PDOErrors.txt', $e->getMessage(), FILE_APPEND);   
}  
//get query
$FNresult=$DBH->query('SELECT first FROM contacts'); 
//set fetch mode
$FNresult->setFetchMode(PDO::FETCH_ASSOC);

$dropdown = "<select name='contacts' id='contacts' >";

while($row =$FNresult->fetch()) {

  $dropdown .= "\r\n<option value='{$row['first']}'>{$row['first']}</option>";
 // echo getLN();

}

$dropdown .= "\r\n</select>";

echo $dropdown;

//}
/*
//                  Get last name

function getLN(){
    $query = "SELECT last FROM contacts";
    $LNresult=mysql_query($query);

    $last;
    while($row = mysql_fetch_assoc($LNresult)) {

        $last = "{$row['last']}";

    }
    echo $last;
}//end getLN
*/

$DBH = null; 
?>
<!-- javascript on client-side -->
<script  type="text/javascript"  src="http://code.jquery.com/jquery-latest.min.js">
//$.post(url, [data], [callback], [callback type])

    ("#dropdown").on('change', function() {//when you select something from the dropdown function run and will switch the data
        $.post("backgroundScript.php", {
                uid: $(this).val()
            },
             function(data) {
                 $("#first").val(data.first);
               $("#last").val(data.last);
               // etc.;
            }, 'json'
        );

    });
</script>


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

/*("#dropdown").on('connection', function (stream) {
  console.log('Ah, we have our first user!');
});*/</script>

<form action="insert.php" method="post">
First Name: <input type="text" id="first" name="first"><br>
Last Name: <input type="text" id="last"><br>
Phone: <input type="text" id="phone"><br>
Mobile: <input type="text" id="mobile"><br>
Fax: <input type="text" id="fax"><br>
E-mail: <input type="text" id="email"><br>
Web: <input type="text" id="web"><br>
<input type="Submit">
</form>

这是我在输出页面上新编辑的脚本=

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

//$("#dropdown-parent").on('change','#dropdown', function() { // replace dropdown-parent
    $("#contacts").on('change','#dropdown', function() {

        $.post("backgroundScript.php", { 
                uid: $(this).val() 
            }, 
             function(data) { 
                 $("#first").val(data.first); 
                 $("#last").val(data.last); 
                 // etc.; 
            }, 'json' 
        ); 
    }); 
</script>

这是 backgroundScript.php 的 php 文件 =

<?

// background script

// retrieve data based on $_POST variable, set to $returnArray

$returnArray = $_POST[array(
         'first' => firstName,
         'last' => lastName,
)];

/****************************
 * the structure of returnArray should look something like
     array(
         'first' => firstName,
         'last' => lastName,

     )*/
echo json_encode($returnArray);
?>

该文件将发送信息,因此 javascript 将用指定区域中的内容替换表单字段

4

4 回答 4

2

看起来您的 PHP 脚本正在返回一些格式化的 html,然后您尝试通过 .val() 将其插入 dom。该方法用于设置表单字段的值,而不是插入整个 html 块。尝试使用.append()or.html()代替,加上上面 Phil 建议的操作 - 将您的脚本分成多个块。

于 2012-08-07T04:14:02.583 回答
1
<script  type="text/javascript"  src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>    
    $("#dropdown-parent").on('change','#dropdown', function() { // replace dropdown-parent
        $.post("backgroundScript.php", { 
                uid: $(this).val() 
            }, 
             function(data) { 
                 $("#first").val(data.first); 
                 $("#last").val(data.last); 
                 // etc.; 
            }, 'json' 
        ); 

    }); 
<script>

在你的 PHP 中你应该有这样的东西

echo json_encode(array('first' => $some_value, 'last' => "Other value"));
于 2012-08-07T04:13:19.877 回答
1

您需要在使用之前包含您的 jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
  // Your Code Here
</script>

更好的是使用外部 JS:

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

如果您使用的是 HTML5,type="text/javascript"则甚至不需要:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/site.js"></script>

更好的是使用 jQuery CDN

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

此外,正如其他人所指出的,一定要$在 jQuery 工厂的开头使用。IE$('#dropdown')

- 更新 -

进一步说明项目树,大多数基本项目树如下所示:

root/
 |--css/
 |--images/
 |--js/
    |--site.js
 |--index.html

-- 更新 2 --

一个例子$.post

$.post({
    'somescript.php', // Script your posting to
    { 
        someParam1: someData1, // $_POST['someParam1']
        someParam2: someData2
        // etc etc
    },
    function(response){
        // Do something with JSON response upon successful post
        alert(response);
    },
    'json' // Tells the script that JSON will be returned
});

-- 更新 3 --

好的,所以基本上你想做的是......

Javascript:

var dropdown = $('#dropdown');

dropdown.bind('change', function(){
    $post.(
        'backgroundScript.php', 
        { 
            first: dropdown.val() 
        },
        function(response) {
            $('#first').val(response.first);
            $('#last').val(response.last);
            // Repeat for all of your form fields
        },
        'json'
    );
});

接收 POST 参数:

$firstName = $_POST['first'];

MySQL 查询将类似于以下内容:

$sth = $dbh->prepare('SELECT *
    FROM contacts
    WHERE first = :first');
$sth->bindParam(':first', $first, PDO::PARAM_STR);
$sth->execute();

然后将所有 MySQL 字段添加到关联数组 array(key => value) 中,然后json_encode返回数组。

于 2012-08-07T04:15:54.197 回答
0

不应该

("#dropdown").on('change', function() {

$("#contacts").on('change', function() {
于 2012-08-07T04:15:32.183 回答