a simple search with AngularJS and PHP

http://www.keyboardninja.eu/webdevelopment/a-simple-search-with-angularjs-and-php

Recently I found AngularJS, a so called “Superheroic Javascript MVC framework” by Google?.
I must say I am impressed by its simple, readable and quick way of working.

This framework is smart, very smart. Go have a look when you’re ready on the AngularJS site. Especially the basics tutorial is worth watching for beginners.

I have created a simple search form with a PHP back end and AngularJS to handle the request and response.
It’s divided in three elements:

  • The form
  • The AngularJS script
  • The server-side script

You can copy paste the source code from below or have a look at this DEMO.

The Form (searchform.htm)


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html ng-app>
  3. <head>
  4. <title>Search form with AngualrJS</title>
  5.     <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
  6.     <script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
  7.     <script src="search.js"></script>
  8. </head>

  10. <body>

  12.     <div ng-controller="SearchCtrl">
  13.     <form class="well form-search">
  14.         <label>Search:</label>
  15.         <input type="text" ng-model="keywords" class="input-medium search-query" placeholder="Keywords...">
  16.         <button type="submit" class="btn" ng-click="search()">Search</button>
  17.         <p class="help-block">Try for example: "php" or "angularjs" or "asdfg"</p>        
  18.     </form>
  19. <pre ng-model="result">
  20. {{result}}
  21. </pre>
  22.    </div>
  23. </body>

  25. </html>

The AngularJS script (search.js)


点击(此处)折叠或打开

  1. function SearchCtrl($scope, $http) {
  2.     $scope.url = 'search.php'; // The url of our search
  3.         
  4.     // The function that will be executed on button click (ng-click="search()")
  5.     $scope.search = function() {
  6.         
  7.         // Create the http post request
  8.         // the data holds the keywords
  9.         // The request is a JSON request.
  10.         $http.post($scope.url, { "data" : $scope.keywords}).
  11.         success(function(data, status) {
  12.             $scope.status = status;
  13.             $scope.data = data;
  14.             $scope.result = data; // Show result from server in our <pre></pre> element
  15.         })
  16.         .
  17.         error(function(data, status) {
  18.             $scope.data = data || "Request failed";
  19.             $scope.status = status;            
  20.         });
  21.     };
  22. }

The server-side script (search.php)


点击(此处)折叠或打开

  1. <?php
  2. // The request is a JSON request.
  3. // We must read the input.
  4. // $_POST or $_GET will not work!

  6. $data = file_get_contents("php://input");

  8. $objData = json_decode($data);

  10. // perform query or whatever you wish, sample:

  12. /*
  13. $query = 'SELECT * FROM
  14. tbl_content
  15. WHERE
  16. title="'. $objData->data .'"';
  17. */

  19. // Static array for this demo
  20. $values = array('php', 'web', 'angularjs', 'js');

  22. // Check if the keywords are in our array
  23. if(in_array($objData->data, $values)) {
  24.     echo 'I have found what you\'re looking for!';
  25. }
  26. else {
  27.     echo 'Sorry, no match!

That should do it!

Posted: April, 2014 in Webdevelopment











<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
阅读(12) | 评论(0) | 转发(0) |
0

上一篇：AngularJS CRUD Example with PHP, MySQL and Material Design

下一篇：Starting out with Node.js and AngularJS

相关热门文章
给主人留下些什么吧！~~
评论热议
posted @ 2016-02-01 00:00  张同光  阅读(81)  评论(0)    收藏  举报