使用 javascript 将数据放入文本框中

Question

我想在文本框中的数组中显示我过滤后的数据...我已经在谷歌上寻找了几天来寻找我的程序的相同想法，但我找不到任何帮助。

我认为问题在于它没有按预期工作的脚本...我需要你们的帮助。

示例预期输出：

html代码：

<form name="form" method="get"> 
Search batchcode: <input type="text" id="query" name="search" /><br /> 
<table> 
<tr> 
<td> 
ID: <br /> 
<input id="id1" type="text" name="id1" /> <br /> 
<input id="id2" type="text" name="id2" /> <br /> 
</td> 
<td> 
Name: <br /> 
<input id="name1" type="text" name="name1" /> <br /> 
<input id="name2" type="text" name="name2" /> <br /> 
</td> 
<td> 
Score 1: <br /> 
<input id="optA1" type="text" name="optA1" /> <br /> 
<input id="optA2" type="text" name="optA2" /> <br /> 
</td> 
<td> 
Score 2: <br /> 
<input id="optB1" type="text" name="optB1" /> <br /> 
<input id="optB2" type="text" name="optB2" /> <br /> 
</td> 
<td> 
Other Qualification: <br /> 
<input id="other_qual1" type="text" name="other_qual1" /> <br /> 
<input id="other_qual2" type="text" name="other_qual2" /> <br /> 
</td> 
<td> 
Interview: <br /> 
<input id="interview1" type="text" name="interview1" /> <br /> 
<input id="interview2" type="text" name="interview2" /> <br /> 
</td> 
<td> 
Total: <br /> 
<input id="total1" type="text" name="total1" /> <br /> 
<input id="total2" type="text" name="total2" /> <br /> 
</td> 
</tr> 
</table> 
</form>

脚本代码：

<script type="text/javascript">
$(document).ready(function(){
    $('input[name^=search]').click(function(){
            $.ajax({
            url:"search.php",
            type:"GET",
            data: { term : $('#query').val() },
            dataType:JSON,
            success: function(result) {
                $('#id1').val(result.id).show();
                $('#id2').val(result.id).show();
                $('#name1').val(result.name).show();
                $('#name2').val(result.name).show();
                $('#optA1').val(result.score1).show();
                $('#optA2').val(result.score1).show();
                $('#optA1').val(result.score2).show();
                $('#optA2').val(result.score2).show();
                $('#other_qual1').val(result.other_qual).show();
                $('#other_qual2').val(result.other_qual).show();
                $('#interview1').val(result.interview).show();
                $('#interview2').val(result.interview).show();
                $('#total1').val(result.total).show();
                $('#total2').val(result.total).show();
            }
        });
    })
});      
</script>

search.php 页面：

<?php

$q = $_GET['term'];

mysql_connect("localhost","root","");
mysql_select_db("test");
header('Content-type: application/json');
$query = mysql_query("SELECT * FROM score WHERE batchcode LIKE '%$q%'");

$data = array();
while($row = mysql_fetch_array($query)){
$data[] = array('value'=>$row['batchcode'], 
'id' => $row['id'], 
'name' => $row['name'], 
'score1' => $row['score1'], 
'score2' => $row['score2'], 
'other_qual' => $row['other_qual'], 
'interview' => $row['interview'], 
'total' => $row['total']
);
}
echo json_encode($data);
?>

当我进入 search.php 页面时，我得到这个输出：

Answer 1

我试过你的代码，一切似乎都很好，尽管有一些小错误。

在您在 search.php 的第 3 行显示错误的图片中，我认为您在没有 GET 变量的情况下从浏览器本身运行了 url，这就是为什么它似乎显示该错误，尽管您的数据库查询似乎正在工作。您的 AJAX 代码似乎正在通过其数据值正确发送 $_GET['term'] 。但是，您的 AJAX 响应有错误。

我唯一需要改变的就是——

dataType:JSON,

到

dataType:'JSON',   //Note the quotes

它成功了！。

它给出的错误是 No conversion from text to [object 。当 ajax 发生错误时，我通过添加回调函数发现了这一点。是这样的（你不必添加这个，但这样做是个好主意。）

//Immediately after the success callback, separated by comma.
error:  function(jqXHR,textStatus,errorThrown ){
    console.log(JSON.stringify(jqXHR));
    console.log(textStatus);
    console.log(errorThrown);
}

希望这会有所帮助。

PS：在您的 JavaScript 中，您似乎在 click 事件上触发了 ajax。这甚至在用户编写任何内容之前触发 ajax 调用，从而使您的 GET 变量为空。更好的选择是 focusout，它允许用户在填充其余字段之前输入内容。

Answer 2

search.php 中的错误，第 3 行：GET 中有任何值吗？

您的输入字段的名称是“search”，但您的 GET 是“term”

<input type="text" id="query" name="search" />

$q = $_GET['term'];

必须相同

Answer 3

变化：

input type="text" id="query" name="search"

到：

"input type="text" id="query" name="term"

html 表单名称标签应与 php 脚本标签匹配。