使用PHP获取,使用Javascript

时间:2016-07-18 20:11:25

标签: javascript php jquery ajax

我目前正面临一个问题,我希望得到您的帮助,以正确的方式解决问题。两种语言......取决于它的其他语言。 (至少在我的情况下)。

PHP:访问数据库,插入,选择数据。

Javascript:无需刷新页面即可调用有用的事件。

嗯..我已经使用了ajax,但我的方式看起来很复杂。

让我用一个例子。让我们说我有以下PHP函数。

function createDiv($value1, $value2, $value3){
   echo "
      <div>
        <h3>."$value1".</h3>
        <h3>."$value2".</h3>
        <h3>".$value3."</h3>
      </div>
   ";
}

我的HTML内部我正在调用此函数。

<?php 

    $values = $db->getValues(); //( Let's say that i'm getting an array )
    createDiv($values[0],$values[1],$values[2]); 

?>

现在让我们更进一步......我想在点击预定义的列表项时在该div中附加数据,而不必刷新。

<ul class="social-buttons" id="demo2">
  <li>
    <a onclick="letterSearch(this);" >A</a>
  </li>
  <li>
    <a onclick="letterSearch(this);" >B</a>
  </li>
  <li>
    <a onclick="letterSearch(this);" >C</a>
  </li>
<li>

所以,现在我正在使用javascript&amp; AJAX。

function letterSearch(element){
    //With this ajax i'm calling a similar function to $db->getValues(); 
    //That i called before to get my values
    //With the difference of the searching parameter
    $.ajax ({
      type:"POST",
      url: "ajaxAccess.php",
      dataType:"json",
      data: {tag: 'valuesWithSearch', arguments: element.innerHTML},
      success: function(result) {
        var jsonValues = JSON.parse(result);
        //After this point i have stored in jsonValues the expected array list that i wanted to get.
        //Now what??
      }
    });
}

所以......

我的第一个问题是:我如何将我刚从ajax获取的数据放在div的底部?

jQuery.append()?

最后但并非最不重要..我的方法是否过于复杂?还有其他办法吗?

1 个答案:

答案 0 :(得分:0)

在PHP中

<?php
    echo json_encode(["values"=>$db->getValues()); //Let's say this is an array
?>

在HTML中

<ul class="social-buttons" id="demo2">
   <li>
     <a class="letter-search" >A</a>
   </li>
   <li>
     <a class="letter-search" >B</a>
   </li>
   <li>
     <a class="letter-search" >C</a>
   </li>
 <li>

IN JAVASCRIPT / JQuery

  $(".letter-search").click(function(e){
       e.preventDefault();//Prevent default link action
       letterSearch($(this));  
  }) 



  function letterSearch(element){
      $.ajax ({
        type:"POST",
        url: "ajaxAccess.php",
        dataType:"json",
        data: {tag: 'valuesWithSearch', arguments: element.text()},
        success: function(result) {
          var response = JSON.parse(result);
         //You now have a valid JSON response
          //Append if needed, or loop through and process before appending
           element.append(response.values)
        }
      });
  }