代码之家 › 专栏 › 技术社区 › Marcos T. Gobriel

从ajax php脚本获取数据

ajax php javascript

Marcos T. Gobriel · 技术社区 · 6 年前

你好,我正在尝试添加实时搜索功能到我的网站我用ajaxphp这样做

当我点击一个实时搜索结果时,我想更改实时搜索字段的值,并将所选结果的id放入一个隐藏的表单字段中,以便以后在insert中使用

<script>
    $(document).ready(function(){
        load_data();
        function load_data(query)
        {
            $.ajax({
                url:"search.php",
                method:"GET",
                data:{textbook:query},
                success:function(data)
                {
                    $('#result').html(data);
                }
            });
        }
        $('#search').keyup(function(){
            var search = $(this).val();
            if(search != '')
            {
                load_data(search);
            }
            else
            {
                load_data();
            }
        });
    });
</script>

<script>

    selectxt(id, textbood_adress){

        $('#search').val(textbood_adress);

    }
</script>

<div class="form-group input-group" id="textbook">
<input type="text" name="search" id="search" placeholder="Search"  class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i>
</button>
</span>

</div>
<div id="result"></div>

对于php

include ("../../includes/config.php");
$output = '';

if(isset($_GET['textbook'])){

    $key=$_GET['textbook'];
$key = $db->escape($key);



    $results = $db->rawQuery("SELECT * from textbook where textbook_address like '%{$key}%' ");

    if($db->count > 0){

        $output .= '
      <div class="table-responsive">
       <table class="table table bordered">
       <tr>
         <th>Textbook address</th>
         <th>select?</th>
        </tr>';

        foreach ($results as $result) {

            $output .= '
  <tr>
    <td>'.$result["textbook_address"].'</td>
    <td><a id="selectclick" href="#" onclick="selectxt('.$result['id'].','.$result['textbook_address'].')">select</a></td>
   </tr>
  ';


        }

        echo $output;

    }else{

        echo "<span>No results for your search</span>";

    }






}



?>

1 回复 | 直到 6 年前

Cemal 6 年前

你的函数声明是错误的。更改javascript代码从

<script>
$(document).ready(function(){
    load_data();
    function load_data(query)
    {
        $.ajax({
            url:"search.php",
            method:"GET",
            data:{textbook:query},
            success:function(data)
            {
                $('#result').html(data);
            }
        });
    }
    $('#search').keyup(function(){
        var search = $(this).val();
        if(search != '')
        {
            load_data(search);
        }
        else
        {
            load_data();
        }
    });
});
</script>
<script>

selectxt(id, textbood_adress){

    $('#search').val(textbood_adress);

}
</script>

到

<script>

function load_data(query) {
    $.ajax({
        url: "search.php",
        method: "GET",
        data: {textbook: query},
        success: function (data) {
            $('#result').html(data);
        }
    });
}

function selectxt(id, textbood_adress) {
    $('#search').val(textbood_adress);
}

$(document).ready(function () {
    load_data();
    $('#search').keyup(function () {
        var search = $(this).val();
        if (search != '') {
           load_data(search);
        }
        else {
           load_data();
        }
     });
});
</script>

你的javascript函数声明是错误的,而且放错了地方。下面是一个例子 on CodePen

请检查并确认 $result['textbook_address'] ' 在里面。这将破坏您的html输出,因为浏览器将试图解释错误