将用户值与数据库进行比较,并通过ajax jquery显示结果

时间:2017-11-26 10:06:08

标签: php jquery ajax database

伙计们正在进行我的第一个直播项目,我陷入困境,我需要帮助ajax jquery。我可以用PHP做到这一点,但我想用ajax做到这一点。

如果用户输入产品代码,那么我想将此产品代码值与我的数据库进行比较,并以我的其他形式显示产品名称,该名称将在用户输入值后打开:

enter image description here

在第一个字段中,我想要产品名称:

enter image description here

在我的表格中,您可以看到产品代码和产品名称:

enter image description here

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

2 个答案:

答案 0 :(得分: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
}

答案 1 :(得分:0)

我知道你想做什么,但如果没有具体的代码,我能做的最好就是给你一个普遍的答案。

当用户填写字段时,您希望将该字段发布到服务器,查找产品并返回一些内容。

基础知识看起来像这样。

$(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中,您必须处理请求。从field数组中提取$_POST,在数据库中查找。然后构建一个响应数组并将其作为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或标头调用。

-note-使用超时,在每次按键时重置(滚动超时)。它的作用是每次释放密钥时重置先前的超时。这样它只会在用户退出键入时发送请求(而不是在每次按键时发送请求)。我发现450毫秒是关于它的完美价值。不要太长也不要太短。基本上,一旦他们停止输入450 ms,它将触发$.post