データベースとユーザー値を比較し、結果をajax jqueryで表示

Question

私の最初のライブプロジェクトに取り組んでいて、ある時点で立ち往生しています。そこでは、ajax jqueryの助けが必要です。私はPHPでこれを行うことができますが、私はajaxでこれをやりたい

ここ

ユーザーは製品コードを入力した場合、私は、ユーザーの入力値の後にオープンします私の他の形で私のデータベースやショー、製品名には、この製品のコード値を比較したい：

ここでは、最初のフィールドで、私は製品名を欲しい：

ここに私のテーブルでは、製品コード、製品名見ることができます：

を3210

ok so here is my html code in last option when user enter product code

Here is jquery i am sending user data to 8transectiondata.php to compare

And this is php file and i want $data['product_name']; to show

Answer 1

私はあなたが何をしたいのかを知っているが、具体的なコードなしで私ができる最善のは、あなたの一般的な答えを与えています。

ユーザーがフィールドを塗りつぶしたときに、そのフィールドをサーバーに投稿し、製品をルックアップしていくつかのものを戻したいとします。

基本は次のようになります。

$(document).ready(function(){ 

    //rolling timeout 
    var timeout; 

    $('#field').on('keyup', function(e){ 

     if(timeout) clearTimeout(timeout); 

      timeout = setTimeout(function(){ 
       var data = { 
         "field" : $('#field').val() 
       }; 

       $.post('{url}', data, function(response){ 

         if(response.debug) console.log(response.debug); 

         if(response.success){ 
          //open other form 
          $('{otherFormProductField}').val(response.product); 
         } 

        }); //end post 
      },450); //end timeout 
    });//end onKeyup 
}); //end onReady 

PHPでは、リクエストを処理する必要があります。 $_POSTアレイからfieldを引き出し、データベースで検索します。レスポンス配列を作成し、JSONとしてクライアントに送り返します。私はこのような構造で応答を構築するのが好きです。

{ 
    success : "message", //or error : "message" 
    debug : "", 
    item : "" 
} 

次にPHPでこれを行います。

ob_start(); 

    ..code.. 

    $response['debug'] = ob_get_clean(); 

    header("Content-type:application/json"); 
    echo json_encode($response); 

この方法で、あなたはそれを開発するときに、まだ（側の出力バッファ・コール）デバッグ情報をプリントアウトすることができ、それはJSONまたはヘッダコールをめちゃくちゃ心配する必要はありません。

注：タイムアウトを使用すると、キーを押すたびにリセットされます（ローリングタイムアウト）。キーが離されるたびに前のタイムアウトがリセットされます。そのようにすれば、ユーザーは一度だけキー入力ごとにリクエストを送信するのではなく、入力を終了するとリクエストを送信します。私は450ミリ秒がこれに最適な値であることを発見しました。あまりにも短くはありません。基本的には、入力を中止すると450ミリ秒になります。$.post

Answer 2

これは一般的な答えです。

JSファイル：

$(document).ready(function() { 

    $('#myButtonId').on('click', function() { 

     var code = $('#myCodeInputId').val(); 

     if (code !== '') { // checking if input is not empty 

      $.ajax({ 
       url: './my/php/file.php', // php file that communicate with your DB 
       method: 'GET', // it could be 'POST' too 
       data: {code: code}, 
       // code that will be used to find your product name 
       // you can call it in your php file by "$_GET['code']" if you specified GET method 
       dataType: 'json' // it could be 'text' too in this case 
      }) 
       .done(function (response) { // on success 
        $('#myProductNameInput').val(response.product_name); 
       }) 
       .fail(function (response) { // on error 
        // Handle error 
       }); 

     } 
    }); 
}); 

PHPファイル：

// I assumed you use pdo method to communicate with your DB 

try { 
    $dbh = new PDO('mysql:dbname=myDbName;host=myHost;charset=utf8', 'myLogin', 'myPassword'); 
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
} 
catch(PDOException $e) { 
    exit('ERROR: ' . $e->getMessage()); 
} 

$sql = "SELECT `product_name` FROM `products` WHERE `product_code` = :code"; 

$result = $dbh->prepare($sql); 
$result->bindValue('code', $_GET['code'], PDO::PARAM_INT); 
$result->execute(); 

if($result->rowCount()) { // if you got a row from your DB 
    $row = $result->fetchObject(); 
    echo json_encode($row, JSON_UNESCAPED_UNICODE); // as we use json method in ajax you've got to output your data this way 
    // if we use text method in ajax, we simply echo $row 
} 
else { 
    // handle no result case 
}