javascript - 使用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 行中显示错误的图片中，我认为你运行的 url 没有来自浏览器本身的 GET 变量，这就是它似乎显示该错误的原因，尽管你的数据库查询似乎正在工作。您的 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 中，您似乎已经在点击事件上触发了 ajax。这甚至会在用户写入任何内容之前触发 ajax 调用，从而使您的 GET 变量为空。更好的选择是 focusout ，这将允许用户在填充其余字段之前键入内容。