时间戳

首页 > 解决方案 > ajax请求，查询数据库，json_encode，成功返回，显示结果

javascript - ajax请求，查询数据库，json_encode，成功返回，显示结果

问题描述

我正在编写一段新代码，而且我是 ajax 新手，所以我无法让它工作。我有一个文本框，它分配了一个 javascript onKeyUp。第一个功能是延迟功能。它设置了一个延迟计时器，只要没有通过该延迟计时器发出其他请求，它就会在一段时间后使用 ajax 运行第二个函数。在 ajax 内部，它根据在文本框中输入的文本运行位于第二个文件中的数据库查询。它设置一个结果数组，对它们进行 json_encode 编码，然后将它们返回到原始页面。然后，我需要用结果填充页面（使用 php）。

文本框

<input type="text" onKeyUp="delay_method('search_customer',search_customer(this.value),'2000')" />

延迟函数

<script type="text/javascript">
function delay_method(label,callback,time){
    if(typeof window.delayed_methods=="undefined"){window.delayed_methods={};}  
    delayed_methods[label]=Date.now();
    var t=delayed_methods[label];
    setTimeout(function(){ if(delayed_methods[label]!=t){return;}else{  callback();}}, time||500);
  }
</script>

ajax函数

<script type="text/javascript">

function search_customer(value){    

console.log(value); 

    $.ajax({
  type: "POST",
  url: "secondpage.php",
  data: query,
  dataType: 'json',
  success: function(data){
    console.log(data.name); // customer name
    console.log(data.company);   // customer company name
  }
});
}

</script>

第二页

设置一个数组进行测试。暂时绕过查询。只需要将结果返回到主页。一旦它工作，我可以从 php 设置数组。我的查询将使用LIKE %search text%

$arr = array(
  'name'=>'overflow',
  'company'=>'value'
);
echo json_encode($arr);

我不知道如何从 ajax 函数中检索数据并填充结果。我很想将结果返回到 php 数组中，然后循环遍历数组以回显结果。我可以循环遍历 php 中的数组...我最关心的是将结果返回到 php 数组中。

任何帮助都会很棒。我似乎无法让代码工作。我是 ajax 新手，所以我边走边学。

更新

除了延迟之外，一切都在按应有的方式进行。它不会延迟任何事情。在激活 ajax 功能之前，我需要它在每次按键后等待 2 秒。如果它收到另一个 keyup，它会再等待 2 秒。IT 一直持续到 2 秒内没有按键。这样，如果该人仍在打字，它就不会在每个键盘上查询数据库。现在它处理每个keyup的所有内容。

文本框

<input type="text" onKeyUp="delay_method('search_customer',search_customer(this.value),'2000')" />

延迟

function delay_method(label,callback,time){
    if(typeof window.delayed_methods=="undefined"){window.delayed_methods={};}  
    delayed_methods[label]=Date.now();
    var t=delayed_methods[label];
    setTimeout(function(){ if(delayed_methods[label]!=t){return;}else{  callback();}}, time||500);
  }

ajax函数

function search_customer(value){    

console.log(value); 

    $.ajax({
  type: "POST",
  url: "secondpage.php",
  data: { "value": value },
  dataType: 'html',
  success: function(data){
      $('#resultDiv').html(data);
  }
});
}

第二页：

$value = $_POST['value'];

if ((isset($value)) && ($value != "")) { 
$arr = array();
$search_query = $db1q->query("SELECT first_name, company FROM Users WHERE first_name LIKE '%$value%' OR last_name LIKE '%$value%' OR company LIKE '%$value%'");
if ($search_query->num_rows > 0) {

    while ($search_result = $search_query->fetch_assoc()) {
$arr[$search_result['first_name']] = $search_result['company'];
    }
}

   $html = '';
    $html .= '<div>';
    foreach ($arr as $key => $value) {
        $html .= '<div class="sub-div"><h2>'.$key.'</h2> : ' . '<h4>' . $value . '</h4></div>';
    }
    $html .= '</div>';

echo $html;
}

标签： javascriptphpjqueryajax

解决方案

您无法将结果返回到 js 中的 php 数组中。因此，您要做的就是在 js 中传递处理后的 html 并在页面上打印。

例如，在第二页

$arr = array(
  'name'=>'overflow',
  'company'=>'value'
);

使用上面的数组 $arr 在此处生成 html 并将其存储在变量中。将该变量传递给js。

例如：

    $html = '';
    $html .= '<div>';
    foreach ($arr as $key => $value) {
        $html .= '<div class="sub-div"><h2>'.$key.'</h2> : ' . '<h4>' . $value . '</h4></div>';
    }
    $html .= '</div>';

echo $html;

现在您将在您的 ajax 成功中获得 html。只显示在 div 上

$('resultDiv').html(data);

推荐阅读