来自php脚本的搜索栏和结果
来自php脚本的搜索栏和结果
提问于 2018-04-14 04:08:59
你好，我已经创建了一个SearchPage，但是我不知道如何用php脚本返回搜索结果。我已经创建了一个authservice提供程序来连接数据库，只要我调用它来返回会话用户的数据，它就会工作得很好。我希望用户在搜索栏中键入字母，并将结果显示在
<ion-content padding>
<ion-card *ngFor="let item of dataSet; let msgIndex = index">authservice.ts
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
let apiUrl = "http://localhost/PHP-Slim-Restful1/api/";
@Injectable()
export class AuthService {
constructor(public http: Http) {
console.log('Hello AuthService Provider');
}
postData(credentials, type){
return new Promise((resolve, reject) =>{
let headers = new Headers();
this.http.post(apiUrl+type, JSON.stringify(credentials), {headers: headers}).
subscribe(res =>{
resolve(res.json());
}, (err) =>{
reject(err);
});
});
}
}SearchPage.ts
@Component({ selector: "page-search", templateUrl: "search.html" })
export class SearchPage {
public userDetails: any;
public resposeData: any;
public dataSet: any;
public noRecords: boolean;
userPostData = {
uid: "",
token: "",
username: "",
bio: "",
profile_pic: "",
message: "",
msg_id: "",
title: "",
description: "",
media_pic: "",
created: "",
uid_fk: ""
};
constructor(
public common: Common,
public navCtrl: NavController,
public app: App,
public menu: MenuController,
public authService: AuthService,
platform: Platform,
statusBar: StatusBar,
splashScreen: SplashScreen
) {
const data = JSON.parse(localStorage.getItem("userData"));
this.userDetails = data.userData;
this.userPostData.uid = this.userDetails.uid;
this.userPostData.token = this.userDetails.token;
this.userPostData.username = this.userDetails.username;
this.userPostData.msg_id = this.userDetails.msg_id;
this.userPostData.message = this.userDetails.message;
this.userPostData.title = this.userDetails.title;
this.userPostData.description = this.userDetails.description;
this.userPostData.media_pic = this.userDetails.media_pic;
this.userPostData.created = this.userDetails.created;
this.userPostData.profile_pic = this.userDetails.profile_pic;
this.userPostData.bio = this.userDetails.bio;
this.noRecords = false
this.SearchResults();
}
SearchResults() {
this.authService.postData(this.userPostData, "userGroupSearch").then(
result => {
this.resposeData = result;
if (this.resposeData.userGroupSearch) {
this.dataSet = this.resposeData.userGroupSearch;
console.log(this.dataSet);
} else {
console.log("No access");
}
},
err => {
//Connection failed message
}
);
}我在这里调用PHP函数，userGroupSearch是函数的名称。
this.authService.postData(this.userPostData, "userGroupSearch").then(而JSON在这里返回
this.dataSet = this.resposeData.userGroupSearch;SearchPage.html
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-searchbar [(ngModel)]="myInput"
[showCancelButton]="shouldShowCancel"
(ionInput)="onInput($event)"
(ionCancel)="onCancel($event)"
placeholder="Search for Media, Artists, Flows...">
</ion-searchbar>
</ion-navbar>
<ion-content padding>
<ion-card *ngFor="let item of dataSet; let msgIndex = index"></ion-card>
</ion-content>回答 1
Stack Overflow用户
发布于 2018-06-28 07:16:33
好吧，我会假设你的authservice提供者工作得很好，我会用php向你展示这一点，没有框架，我不会用jwt或oauth或一些认证系统做认证，但会直接进入你的问题:首先，你可能想要触发一个http请求，当用户按回车键时，但让我们按回车键。在ion-searchbar中删除(ionInput)方法，并在angular中使用key.enter事件，如下所示：
<ion-searchbar placeholder="search by name of articles" (keyup.enter)="search()" [(ngModel)]="search_content"></ion-searchbar> 现在，搜索函数将使用您的authservice povider发送一个http get请求，我调用了我的HTTPprovider，代码如下：
search(){
if(this.search_content==""){
}else{
let loader = this.loader.create({
content: "please wait..."
});
loader.present();
this.HttpProvider.getData("search-post.php?search="+this.search_content).then((res)=>{
this.response_data = res;
if(this.response_data==null){
loader.dismiss();
}else{
this.result = this.response_data;
loader.dismiss();
}
})
}
}让我解释一下，我们绑定到离子搜索栏的搜索内容将被检查是否为空如果是，我们什么也不做或者什么也不显示然后我们调用我们的http服务提供者，它发送一个http请求，传递绑定到元素的search_content，是的，为了避免我忘记我们使用了一个我们称为LoadingController的加载器，你可以创建一个单独的服务提供者来处理它，并将提供者导入到你的文件中，然后使用loadingcontroller来使代码更干净，现在下一步是返回http服务的响应值，并将它的值赋给一个名为response_data的全局变量。在映射之后，这一点很重要，不要直接在你的视图中使用它，因为一旦你的搜索结果没有返回任何东西，它就会抛出一个错误，我猜这似乎是ionic 3中的一个bug。完成检查后，如果response_data对象为空，则将其赋给另一个名为result的值，最后关闭我们的加载控制器。对于我们的php文件：
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
header("Access-Control-Allow-Methods:PUT, GET, POST, DELETE, OPTIONS");
require_once "config/config.php";
require_once "config/error.php";
$conn = new config();
$get_var = htmlspecialchars($_GET["search"]);
$space_checker = preg_match("/\s/",$get_var);
$data = array();
if($get_var==""){
} else {
if($space_checker==0){
$sql = "SELECT * FROM post_content where header LIKE '%$get_var%' LIMIT 3";
$result = $conn->query($sql);
$rowcount = $conn->rowcount($result);
if($rowcount == 0){
}else{
foreach ($result as $key => $value) {
$data[] = $value;
}
print json_encode($data);
}
}elseif ($space_checker > 0) {
$value_explode = explode(" ",$get_var);
foreach ($value_explode as $key => $values) {
$sql = "SELECT * FROM post_content where header LIKE '%$get_var%' OR '%$values%' ";
}
$sql.="LIMIT 3";
$result = $conn->query($sql);
$rowcounts = $conn->rowcount($result);
if($rowcounts == 0){
}else{
foreach ($result as $key => $valuese) {
$data[] = $valuese;
}
print json_encode($data);
}
}
}
?>对于php文件，首先我们使用正则表达式检查单词之间的空格数量，然后我们检查发送的get变量是否等于空字符串，我们不显示任何内容，然后我们检查空格数量是否等于零，如果它包含一些搜索内容，它等于零，基本上它有一些内容，但搜索之间没有空格。我们在php中使用like关键字进行搜索，之后我们将其保存在一个数组中并限制它，我使用json_encode 3只返回3个内容，当然会有一个分页，我相信你知道，如果有一个空格存在，我们分解它并获取每个单词并搜索在搜索中输入的全文和它们的单个单词，然后返回一个json_encoded 3内容..
最后，在我们的视图中，我们使用*ngFor显示它：
<ion-list style="margin-top:50px;">
<ion-item *ngFor="let items of result" >
<ion-thumbnail item-left>
<img src="{{ image }}/{{ items.file_name }}">
</ion-thumbnail>
<h4 style="font-weight:bolder;">{{ items.header }}</h4>
<p> <b><span style="font-size:10px;"> <ion-icon name="eye"></ion-icon> {{ items.clicks }} views</span>
<span style="font-size:10px;"> <ion-icon name="clipboard"></ion-icon> {{ items.month }}/{{ items.year }}</span>
</b></p>
</ion-item>
</ion-list>这应该就行了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49824428
复制相关文章
相似问题