html 使用AJAX根据邮政编码检索和显示（无需重新加载页面）人员参议员

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用AJAX根据邮政编码检索和显示（无需重新加载页面）人员参议员相关的知识，希望对你有一定的参考价值。

<html>
<head>
</head>

<body>
<form action="" id="rep-lookup">
  <div>
    <label for="txt-zip">Zip Code:</label>
    <input type="number" id="txt-zip" name="zipcode" required />
  </div>
  <div>
    <input type="submit" id="btn-lookup" value="Look up" />
  </div>
</form>

<div id="rep-lookup-results">
	<em>When data is found, it will be displayed here...</em> 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

<script>
'use strict';

$(document).ready(function() {
  $('#rep-lookup').submit(function(e){
		e.preventDefault();
		
		var $results = $('#rep-lookup-results'),
				 zipcode = $('#txt-zip').val()
				 apiKey = '88fea62dc07a487da4d6cf9204e1e609';
			
		var requestURL = 'http://congress.api.sunlightfoundation.com/legislators/locate?callback=?';
		
		// collect the data
		
		$.getJSON(requestURL, {
				'apikey' : apiKey,
				'zip' : zipcode
		},
			function(data){
				//console.log(data);
				if(data.results && data.results.length > 0) {
					var mySenators = '<p>Here are your Senators</p>';
					
					$.each(data.results, function(i, rep) {
						if('senate' === rep.chamber.toLowerCase()) {
							mySenators += '<p>';
							mySenators += '<a href="' + rep.contact_form + '" target="_blank">';
							mySenators += rep.first_name + ' ' + rep.last_name;
							mySenators += '</a>';
							mySenators += '</p>';
						}
					});
					
					mySenators += '<p>Please write to them and let them know ...!</p>';
					
					$results.html(mySenators);
				
				} else {
					$results.html('<p>No senators found for zip code ' + zipcode + '. Please try again.</p>');
				}
			});
	});
});
</script>
</body>
</html>

以上是关于html 使用AJAX根据邮政编码检索和显示（无需重新加载页面）人员参议员的主要内容，如果未能解决你的问题，请参考以下文章

使用ajax codeigniter php根据日期检索数据库值

使用jQuery $ .ajax方法显示包含MySQL表数据的JSON [关闭]

使用地理编码器根据纬度和经度检索地址会导致延迟。安卓

如何使用 JavaScript 和 AJAX 根据邮政编码自动填充城市和州？

如何使用 colorbox 在我的页面上显示隐藏的 div 而无需硬编码？

如何在 laravel php 中使用 ajax 根据日期范围从 mysql 数据库中检索数据？