Ajax,PHP / MySQL搜索请求不断崩溃

时间:2016-06-13 21:19:51

标签: php mysql ajax

我已经使用Phonegap为Android构建了一个移动应用程序,数据存储在MySQL表中,并且数据是通过ajax请求获取的,但是在尝试创建搜索查询以便在输入后按字面意义过滤数据的情况下工作正常2个字母我的申请崩溃了吗? - 有什么想法吗?

<!-- Remote call to Server -->
    <script type="text/javascript">
         // Call the server for content
         $.ajax({
              url: 'https://www.ppl-support.co.uk/ratchetserver/getdata',  // URL -> load the data
              crossDomain: true,
              success: function(data){
                  $(".list").html(data).show();
              }
          }); 
          $(function(){
            $(".search").keyup(function() 
            { 
                var searchid = $(this).val();
                var dataString = 'search='+ searchid;
                if(searchid!='') {
                  $.ajax({
                    type: "POST",
                    url: "https://www.ppl-support.co.uk/ratchetserver/newgetdata.php",
                    data: dataString, 
                    cache: false,
                    success: function(data) {
                      $(".list").html(data);
                      }
                  });
                }else{
                  $.ajax({
                    url: 'https://www.ppl-support.co.uk/ratchetserver/getdata.php',  //load data 
                    success: function(data){
                      $(".list").html(data);
                    }
                    });
                }
                return true;    
            });
        }); 

         function Reload(){
            location.reload(); // Reload the page onclick 
         }
         //  Send user to Home Screen
         function Home(){
            location.assign('index.html');
         }
    </script>
</head>

<body class="is-ump"><br><br>
  <div id="users">
  <!-- Load abbreviations markup -->
      <ul class="table-view" style="padding-left:0px;" id="theList">
          <ul class="list"  style="padding-left:0px;">
              <li class="table-view-cell media" >
                  <a class="navigate-right">
                      <img class="media-object pull-left" src="img/P1.png" style="width:50px;" alt="" >
                      <div class="media-body">
                          <h4 align="center">
                            Downloading contents, please wait...
                          </h4>
                      </div>
                  </a>
              </li>
          </ul>
      </ul> 

    <!-- Search functionality --->
    <div class="ump">
        <div class="ump-widget-container">
            <div class="ump-widget ump-search-widget ump-hidden" id="ump-search-widget">
                <form action="#" method="POST">
                  <input class="search" style="font-family:exo;" value="" placeholder="Search Abbreviations.." /><!--
                  <button class="ump-button" style="color:white;background:#ffda00;font-family:exo;font-shadow:white;">Search</button> -->
                </form>
            </div>
            <div class="ump-clear"></div>
        </div>
        <!-- navigational panel -->
        <div class="ump-bar">
          <div class="ump-clear">
              <a href="#" class="ump-brand" title="UMP - Ultra Menu Pro">Pocket Pilot</a>
              <div class="ump-icons">
                  <a href="#"><i class="fa fa-envelope"></i></a>
                  <a href="#" class="ump-widget-toggle" data-target="#ump-search-widget"><i class="fa fa-search"></i></a>
                  <div class="ump-clear"></div>
              </div>
          </div>
          <div class="ump-overlay"></div>
        </div>
        <nav>
            <div class="ump-nav-container">
                <div class="ump-header">
                    <img src="img/1.png" alt="" class="ump-header-background-image">
                    <a href="#" title="UMP - Ultra Menu Pro">
                        <img src="img/logo.png" alt="">
                    </a>
                </div>
                <div class="ump-nav">
                    <ul class="ump-default">
                        <li>
                            <a><h4 onclick="Home()">Home</h4></a>
                        </li>
                        <li>
                            <a><h4>About</h4></a>
                        </li>
                    </ul>
                    <ul class="ump-social">
                        <li>
                            <a href="#" class="ump-facebook"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li>
                            <a href="#" class="ump-google-plus"><i class="fa fa-google-plus"></i></a>
                        </li>
                        <li>
                            <a href="#" class="ump-twitter"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li>
                            <a href="#" class="ump-pinterest"><i class="fa fa-instagram"></i></a>
                        </li>
                        <li>
                            <a href="#" class="ump-youtube"><i class="fa fa-youtube-play"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <a class="ump-toggle">
                <i class="fa fa-times ump-close"></i>
                <i class="fa fa-bars ump-open"></i>
            </a>
        </nav>
    </div>
 </div>   
</body>

这是我的PHP文件(搜索)

<?php
header('Access-Control-Allow-Origin: *');
  header("Access-Control-Allow-Methods: POST, GET, OPTIONS");   
    $str = '';
    if($_POST['search'] && $_POST['search'] != "") {
        $q = $_POST['search'];
        include_once('dbconnection.php');
        $sql = "SELECT * FROM `co_abbreviation` WHERE `acronym` LIKE = '%$q%'";
        $result = mysql_query($sql);
        while($row = mysql_fetch_array($result)) {
          $str .= "<div class='card' style='border-radius:0px;'>
                  <ul class='table-view'>
                    <ul class='list' style='padding-left:0px;'>
                        <li class='table-view-cell media'>
                            <a class='navigate-right'>
                                <div class='media-body'>
                                    <h3 class='name'>
                                        <b>
                                            ".$row['acronym']."
                                        </b>
                                    </h3>
                                    <h4 class='born' style='color:#1e404e;'>
                                        <i>
                                            ".$row['meaning']."
                                        </i>
                                    </h4>
                                    <p class='mean' align='left'>
                                   CAA Source:   ".$row['source']."
                                    </p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </ul>
            </div>";    
          }
      }
  echo $str;
?>

http://restlet.com/blog/2016/02/11/implementing-angular2-forms-beyond-basics-part-1/

1 个答案:

答案 0 :(得分:1)

您可以以格式化的形式(例如以json格式)返回数组并返回它。在服务器中创建HTML代码并将其发送到客户端时,在客户端的JS函数中创建HTML代码。发送HTML代码比发送结果数组要花费更多的时间(正如你所说的那样,大约有1k数据)。此外,它还会产生更多的数据流量。