Question

我一直在关注如何使用ajax和jquery

搜索json

https://www.youtube.com/watch?v=gUofPxm0-IM

然而，当我通过我的apache服务器运行页面时，代码不适用于我自己的json文件，就像在视频中一样。有谁知道我做错了什么？

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Index</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <p><br/><br/></p>
  <div class="container">
  <input type="search" class="form-control" id="search" /><br/>
  <table class="table table-striped table-bordered table.hover">
  <table>
  <thead>
  <tr>
  <th>First name</th>
  <th>Last Name</th>
  <th>Phone Number</th>
  <th>Address</th>
  <th>picture</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
   </table>
  </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
	<script>
	$('#search').keydown(function(){
	$.getJSON("address.json",function(data){
	var search = $('#search').val();
	var regex = new RegExp(search, 'i');
	var output;
	$.each(data, function(key, val)){
	if((val.first_name.search(regex) != -1) || (val.last_name.search(regex) != -1){
	output += "<tr>";
	output += "<td id='"+key+"'>"+val.first_name+"</td>";
	output += "<td id='"+key+"'>"+val.last_name+"</td>";
	output += "<td id='"+key+"'>"+val.phone+"</td>";
	output += "<td id='"+key+"'>"+val.address+"</td>";
	output += "<td id='"+key+"'>"+val.picture+"</td>";
	output += "</tr>";
	}
	});
	$('tbody').html(output);
	
	})
	
	</script>
  </body>
</html>

＆＃13;

Answer 1

您将bootstrap css作为脚本加载。

删除它：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>

使用ajax jquery实时搜索json数据

1 个答案: