a simple search with AngularJS and PHP

钱修雅

2023-12-01

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)

点击(此处)折叠或打开

<!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!

Posted: April, 2014 in Webdevelopment

阅读(12) | 评论(0) | 转发(0) |

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

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

a simple search with AngularJS and PHP

The Form (searchform.htm)

The AngularJS script (search.js)

The server-side script (search.php)

相关阅读

相关文章

相关问答