搜索框结果 == JSON 结果
search box result == Json result
我有一个读取JSON文件的Node.js服务器,里面有很多信息。其中之一是一个人的ID,我的HTML页面中有一个搜索框,我想为客户端正确使用jquery方法(需要ajax),以查找用户放入搜索框中的ID是否与JSON中的ID相同,如果是我想返回有关该人的一些信息, 假设用户的名称和用户名。
注意:我100%确定我的服务器.js文件正常工作。
请帮助我,我是Jquery的新手。
到目前为止,我有;
$(document).ready(function(){
$("#id_of_the_search_box_button").click(function (any_function_variable_name) {
$.ajax({
type: 'GET',
url: '/url_of_the_related_server_side',
dataType: 'json'
})
.done(function(data){
console.log(data);
alert(JSON.stringify(data));
data.forEach(function (any_function_variable_name) {
if(any_function_variable_name.search_box_ID == any_function_variable_name.name_in_the_JSON_file_for_one_of_the_searched_ID){
$userElement = $("<li>").html("<strong>ID: </strong>" + any_function_variable_name.id); //id is defined in JSON and I was able to use in another part of the jquery
$userBlock = $("<ul>")
.append(
$("<li>").html("<strong>Name: </strong>" + any_function_variable_name.name) //name of the user
)
.append(
$userElement
)
.append(
$("<li>").html("<strong>User User Name: </strong>" + any_function_variable_name.userName)
);
$any_function_variable_nameBlock.insertAfter("#search");
}
});
});})})
注意:我不知道我是否可以正确关闭括号。
提前感谢!
我想你正在寻找如下所示的东西......
我没有进行 ajax 调用,而是使用静态数据编写,如下所示......
.HTML
<input id="searchBox" type="text" />
<button id="id_of_the_search_box_button">
Search
</button>
<ul>
</ul>
.JS
var data = [
{
"id": 37595960858,
"in_reply_to_screen_name": null,
"user": {
"id": 2384451,
"id_str": "238678",
"name": "Doga I",
"screen_name": "IDoga"
}
},
{
"id": 65739068412,
"in_reply_to_screen_name": null,
"user": {
"id": 2878009,
"id_str": "235678",
"name": "Jon Doe",
"user_name": "JD"
}
}
];
$(document).ready(function(){
$("#id_of_the_search_box_button").click(function (any_function_variable_name) {
var searchText = parseInt($('#searchBox').val());
data.forEach(function (any_function_variable_name) {
if(any_function_variable_name.id === searchText){
$("ul")
.append('<li> <strong>ID: </strong>' + any_function_variable_name.user.id)
.append('<li> <strong>User Name: </strong>' + any_function_variable_name.user.user_name)
.append('<li> <strong>Name: </strong>' + any_function_variable_name.user.name)
.append('<li> <strong>Screen Name: </strong>' + any_function_variable_name.user.screen_name);
} //End if
}); //End forEach
});
});
这让你的 Ajax 像这样调用......
$(document).ready(function(){
$("#id_of_the_search_box_button").click(function (any_function_variable_name) {
$.ajax({
type: 'GET',
url: '/url_of_the_related_server_side',
dataType: 'json'
})
.done(function(data){
var searchText = parseInt($('#searchBox').val());
data.forEach(function (any_function_variable_name) {
if(any_function_variable_name.id === searchText){
$("ul")
.append('<li> <strong>ID: </strong>' + any_function_variable_name.user.id)
.append('<li> <strong>User Name: </strong>' + any_function_variable_name.user.user_name)
.append('<li> <strong>Name: </strong>' + any_function_variable_name.user.name)
.append('<li> <strong>Screen Name: </strong>' + any_function_variable_name.user.screen_name);
} //End if
}); //End forEach
});
});
});
以下是小提琴手
https://jsfiddle.net/rrtbz4bo/7/
在搜索框中输入37595960858
并点击搜索。
更新:调用/find/id?id=...API 直接返回数据,例如
{
"id": 37595960858,
"in_reply_to_screen_name": null,
"user": {
"id": 2384451,
"id_str": "238678",
"name": "Doga I",
"screen_name": "IDoga"
}
}
那么下面应该可以工作。
$(document).ready(function(){
$("#id_of_the_search_box_button").click(function (any_function_variable_name) {
$.ajax({
type: 'GET',
//Or whatever your URL structure is
url: 'http://127.0.0.1:5230/find/id?Id=' + $('#searchBox').val(),
dataType: 'json'
})
.done(function(data){
$("ul")
.append('<li> <strong>ID: </strong>' + data.user.id)
.append('<li> <strong>User Name: </strong>' + data.user.user_name)
.append('<li> <strong>Name: </strong>' + data.user.name)
.append('<li> <strong>Screen Name: </strong>' + data.user.screen_name);
});
});
});
如果这不起作用,请发布一个小提琴手,我会尝试让它工作。
希望这有帮助...
相关文章:
- JSON.stringify和Object.keys在同一个对象上产生不同的结果
- 对于每个json结果,使用类jquery添加css
- 从JSON API结果迭代时未定义
- 在Ionic'中显示JSON结果;s系列重复
- 无法将JSON.parse与JSON_encode中的结果一起使用
- 如何将JSON结果设置为'src'共'img'以在ASP.NET MVC4中显示图像
- json-api和错误结果:无法读取属性'长度'的未定义
- JSON返回数组的奇怪结果
- 获取json结果的身份验证问题
- Neo4j结果(JSON格式)创建D3树图
- 无法在AJAX成功访问中显示JSON结果
- 返回带有筛选结果的新JSON对象
- (临时)在Web应用程序中存储JSON搜索结果
- 迭代 JSON 文件并且未在 Javascript 中正确返回结果
- 意外结果,在 ASP.Net 中解析 JSON 对象的数组
- jquery jqgrid 不显示结果,具体取决于 JSON 对象中的参数
- 从Node.js上的mysql结果JSON中获取一个Array值
- 搜索框结果 == JSON 结果
- 正在从自动完成结果Json中删除重复项
- 如何合并两个facebook图api数据结果(JSON)