2

オートコンプリートフィールドにTwitterBootstrapTypeaheadを使用しています。

終了状態の目標：ユーザーは最初にフィールド1に詳細を入力します。フィールド2に詳細を入力すると、ajaxは、フィールド1にも入力された内容に基づいてデータベースにクエリを実行するPHPファイルに書き込まれるクエリを渡します。

フィールド2からのクエリとフィールド1の内容の両方をPHPファイルに渡して、それらにアクセスするにはどうすればよいですか。

これが私がこれまでに持っているものです：

HTMLファイル：

<div class="field1">
    <input type="text" id="field1" data-provide="typeahead" name="field1">
</div>
<div class="field2">
    <input type="text" id="field2" data-provide="typeahead">
</div>

<script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script>
$(function() {
            $("#field2").typeahead({
                source: function(query, process) {
        var textVal=$("#field1").val();
                    $.ajax({
                        url: 'field2.php',
                        type: 'POST',
                        data: 'query=' + query,
                        dataType: 'JSON',
                        async: true,
                        success: function(data) {
                            process(data);
            console.log(textVal);
                        }
                    });
                }
            });
        });
    </script>

PHPファイル：

if (isset($_POST['query'])) {
$db_server = mysql_connect("localhost", "root", "root");
mysql_select_db("db_test");

$query = $_POST['query'];
$other = '**This needs to be field 1**';

$sql = mysql_query("SELECT * FROM table WHERE row1 LIKE '%{$query}%' AND row2 = '$other'");
$array = array();

while ($row = mysql_fetch_assoc($sql)) {
    $array[] = $row['row1'];
}

echo json_encode($array);}

現時点では、クエリ部分は完全に機能し、結果が返されます（コンソールには、「Field1」からの値も表示されます。同時にその値をphpファイルに取得する必要があります。

どんな助けでも素晴らしいでしょう

4

2 に答える 2

10

私がこれを正しく理解していれば、フィールド 1 と 2 の両方の値を同じ AJAX 呼び出しに解析する必要があります。これがあなたのやり方です。

<script>
$(function() {
  $("#field2").typeahead({
    source: function(query, process) {
      var textVal=$("#field1").val();
      $.ajax({
        url: 'field2.php',
        type: 'POST',
        data: 'query=' + query + '&field1=' + textVal,
        dataType: 'JSON',
        async: true,
        success: function(data) {
          process(data);
          console.log(textVal);
        }
      });
    }
  });
});
</script>

ここで、PHP ファイルに別の $_POST['field1'] を作成するだけです。

于 2013-03-11T03:12:40.403 に答える
0 
var userQuery = $('#ID of query input element').val(); 
var field1 = $('#ID of input 1 element').val();
$.ajax({
type: "POST",
url: '',
data: {query: QueryVariable, input1: input1variable},
success: function(data) {
        // code within this block
}, 
error: function() {
    alert('System Error! Please try again.');
},
complete: function() {
    console.log('completed')
}

}); // ***END $.ajax 呼び出し

于 2013-03-11T03:20:14.450 に答える