Question

我正在开发一段新代码，而且对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的新手，所以我正在学习。

更新

一切正常，除了延迟。它不会拖延任何事情。我需要它从每次键入等待2秒钟，然后才能激活ajax功能。如果收到另一个按键，它将再等待2秒钟。 IT继续进行直到有2秒钟没有键盘输入。这样，如果该人仍在键入，则它不会在每个按键上查询数据库。现在，它使用每个快捷键处理所有内容。

文本框

<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;
}

Answer 1

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

例如，在第二页

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

使用$ arr数组在此处制作html并将其存储在变量中。将该变量传递给js。

对于Ex：

    $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);

Answer 2

我的代码片段（延迟功能）存在的问题是，在keyup事件上，当您调用延迟功能并传递函数/回调参数时，您正在调用并立即执行这不是它的目的。 您应将其作为一个函数传递，然后再调用您的函数（以一种闭合方式）。因此，在这种情况下，闭合将丢失（此）输入的父上下文。要解决此问题，您应该使用bind javascript方法来保留“ this”父代及其属性（如value）

正确的输入onkeyup事件变为该事件：

<input type="text" onKeyUp="delay_method('search_customer',function(){search_customer(this.value);}.bind(this),'2000')" />

Answer 3

ajax请求中的URL标记删除后有多个逗号，如下所示：

 url: "secondpage.php",

通常，使用jQuery的ajax请求格式应为以下格式：

var index=0;
var menuId = $( "ul.nav" ).first().attr( "id" );
var request = $.ajax({
  url: "script.php",
  method: "POST",
  data: { id : menuId },
  dataType: "html"
});

request.done(function( msg ) {
  index++;
  //Append the result to the js array and then try storing the array value to PHP using HTML;
  //Call your next event;
  $( "#log" ).html( msg );
});

request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});

现在，出于逻辑考虑，而不是延迟呼叫，您应该使用完成或成功事件。在成功事件内部，您应该调用下一个需求。因为Ajax是异步的。

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

文本框

延迟功能

ajax函数

第二页

更新

3 个答案: