Appcelerator：简单的邮政编码城市查找器

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Appcelerator：简单的邮政编码城市查找器相关的知识，希望对你有一定的参考价值。

Appcelerator Titanium Mobile is a framework + IDE designed to help you build iPhone applications using only html and javascript. This example shows how to make a simple Ajax request
  1. <html>
  2. <head>
  3. <title>Find City By ZIP Code</title>
  4. <script type="text/javascript" src="jquery-1.3.2.js"></script>
  5.  
  6. <style type="text/css" media="screen">
  7.  
  8. 	#textField{ width:100px; height:30px }	
  9. 	#search-btn{ width:100px; height:47px; color:#0000ff; }
  10. 	#response-txt{ width:300px; text-align:center; font-family:helvetica, impact, sans-serif; font-weight: bold; }
  11.  
  12. 	.center { margin-right:auto;margin-left:auto;width:320px; }
  13. </style>
  14. <script type="text/javascript" charset="utf-8">
  15. var xhr;
  16. var xhrResponse;
  17. var alert;
  18.  
  19. var xmlCity;
  20. var xmlState;
  21. var zipCode;
  22.  
  23. var tf;
  24. var searchBtn;
  25.  
  26.  
  27. 	function initialize(e){
  28. 		/****************************
  29. 		Create Ajax Request
  30. 		****************************/
  31. 		xhr = Titanium.Network.createHTTPClient();
  32.  
  33. 		xhrResponse = $("#response-txt");
  34.  
  35. 		/****************************
  36. 		Create TextField
  37. 		****************************/
  38.  
  39. 		tf  = Titanium.UI.createTextField({
  40. 			id:'textField',
  41. 			value:'90026',
  42. 			color:'#336699',
  43. 			backgroundColor:'#eeeeee',
  44. 			returnKeyType:Titanium.UI.RETURNKEY_DONE,
  45. 			enableReturnKey:true,
  46. 			keyboardType:Titanium.UI.KEYBOARD,
  47. 			autocorrect:false,
  48. 			hintText:'Enter ZIP',
  49. 			textAlign:'left',
  50. 			clearOnEdit:true,
  51. 			borderStyle:Titanium.UI.INPUT_BORDERSTYLE_BEZEL,
  52. 			clearButtonMode:Titanium.UI.INPUT_BUTTONMODE_NEVER,
  53. 		});
  54.  
  55.  
  56. 		$(tf).bind("change", onTfChangeHandler );
  57. 		function onTfChangeHandler(e){
  58. 			tf.value = e.value;			
  59. 		}
  60.  
  61. 		/****************************
  62. 		Create Search Button
  63. 		****************************/
  64. 		searchBtn = Titanium.UI.createButton({ id:'search-btn', title:'Search' });			
  65.  
  66. 		$(searchBtn).bind("click", onSearchClickHandler );
  67. 		function onSearchClickHandler(e){
  68. 			constructAndSend();			
  69. 		}
  70.  
  71. 		/****************************
  72. 		Ajax onLoad Request
  73. 		****************************/
  74. 		xhr.onload = function()
  75.  
  76. 		{
  77. 		   Titanium.API.info( "xhr.onload: " );
  78. 		   var xml = this.responseXML;
  79. 		   // xml now is a Javascript DOM object you can use
  80. 	  	   var xmlDoc = xml.documentElement;
  81.  
  82. 		   try {
  83. 		   		// get a value of the first tag myelement found in XML doc
  84. 		   		xmlCity = xmlDoc.getElementsByTagName("CITY")[0].childNodes[0].nodeValue.toString();
  85. 		   		xmlState = xmlDoc.getElementsByTagName("STATE")[0].childNodes[0].nodeValue.toString();
  86.  
  87. 		   } catch(err) {
  88. 				$(xhrResponse).html = "";
  89.  
  90. 				constructAlert( "Zip Code Not Found. ");
  91. 		   }
  92.  
  93. 		   //xhrResponse.innerHTML = zipCode + "<br>is the ZIP Code for<br>" + xmlCity + ", " + xmlState;
  94. 			$(xhrResponse).html( zipCode + "<br>is the ZIP Code for<br>" + xmlCity + ", " + xmlState );
  95. 		};
  96.  
  97. 	}
  98.  
  99. 	function constructAndSend(){
  100. 		//Capture the Zip Code
  101. 	    zipCode = $(tf).val();
  102.  
  103. 		Titanium.API.info( "constructAndSend: " + zipCode );
  104.  
  105. 		//Confirm that a proper Zip Code has been entered
  106. 	    if ( zipCode != null && zipCode.length == 5 ){	
  107. 			//Fire Off the Ajax Request
  108. 			xhr.open("GET","http://www.webservicex.net/uszip.asmx/GetInfoByZIP?USZip=" + zipCode);
  109. 			xhr.send(null);
  110. 		} else {
  111. 			//Show any errors
  112. 			constructAlert( "A 5-digit ZIP Code must be entered." );
  113. 		}
  114. 	}
  115.  
  116. 	/****************************
  117. 	Create Alert Message
  118. 	****************************/
  119. 	function constructAlert( message ){
  120. 		var alert = Titanium.UI.createAlertDialog();
  121. 		    alert.setTitle("Error");
  122. 		    alert.setMessage( message );
  123. 		    alert.show();
  124. 		return;		
  125. 	}
  126. </script>
  127. <script type="text/javascript" charset="utf-8">
  128. $(document).ready(function() {
  129. 	initialize();
  130. });
  131. </script>
  132. <body style="background-color:#999999">
  133.  
  134. 	<div id="textField" class="center"></div>
  135.  
  136. 	<br/>
  137.  
  138. 	<div id="search-btn"  class="center"></div>
  139.  
  140. 	<br/><br/>
  141.  
  142. 	<div id="response-txt"  class="center"></div>
  143. </body>
  144. </html>

以上是关于Appcelerator：简单的邮政编码城市查找器的主要内容，如果未能解决你的问题，请参考以下文章

使用 HTML / PHP 的邮政编码 / 页面查找器

Mongodb：通过最高的邮政编码城市人口查找具有最高数量的邮政编码和订单状态的城市

查找城市、州的都市区或县

通过 Zip Google Geocode Api 查找城市和州 [关闭]

天气预报API：城市代码--“新编码”和“旧编码” 对比

列表视图 itemclick 事件 appcelerator