http://www.keyboardninja.eu/webdevelopment/a-simple-search-with-angularjs-and-php
阅读(12) | 评论(0) | 转发(0) |
<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>
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)
点击(此处)折叠或打开
- <!DOCTYPE html>
- <html ng-app>
- <head>
- <title>Search form with AngualrJS</title>
- <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
- <script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
- <script src="search.js"></script>
- </head>
-
- <body>
-
- <div ng-controller="SearchCtrl">
- <form class="well form-search">
- <label>Search:</label>
- <input type="text" ng-model="keywords" class="input-medium search-query" placeholder="Keywords...">
- <button type="submit" class="btn" ng-click="search()">Search</button>
- <p class="help-block">Try for example: "php" or "angularjs" or "asdfg"</p>
- </form>
- <pre ng-model="result">
- {{result}}
- </pre>
- </div>
- </body>
-
- </html>
The AngularJS script (search.js)
点击(此处)折叠或打开
- function SearchCtrl($scope, $http) {
- $scope.url = 'search.php'; // The url of our search
-
- // The function that will be executed on button click (ng-click="search()")
- $scope.search = function() {
-
- // Create the http post request
- // the data holds the keywords
- // The request is a JSON request.
- $http.post($scope.url, { "data" : $scope.keywords}).
- success(function(data, status) {
- $scope.status = status;
- $scope.data = data;
- $scope.result = data; // Show result from server in our <pre></pre> element
- })
- .
- error(function(data, status) {
- $scope.data = data || "Request failed";
- $scope.status = status;
- });
- };
- }
The server-side script (search.php)
点击(此处)折叠或打开
- <?php
- // The request is a JSON request.
- // We must read the input.
- // $_POST or $_GET will not work!
-
- $data = file_get_contents("php://input");
-
- $objData = json_decode($data);
-
- // perform query or whatever you wish, sample:
-
- /*
- $query = 'SELECT * FROM
- tbl_content
- WHERE
- title="'. $objData->data .'"';
- */
-
- // Static array for this demo
- $values = array('php', 'web', 'angularjs', 'js');
-
- // Check if the keywords are in our array
- if(in_array($objData->data, $values)) {
- echo 'I have found what you\'re looking for!';
- }
- else {
- echo 'Sorry, no match!
That should do it!
相关热门文章
给主人留下些什么吧!~~
评论热议