JQuery——AJAX

最新推荐文章于 2024-09-03 01:23:13 发布

爪哇天河

最新推荐文章于 2024-09-03 01:23:13 发布

阅读量345

点赞数

分类专栏： web 文章标签： AJAX jquery

本文链接：https://blog.csdn.net/ps_zhanglei/article/details/42461143

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

改造我们使用纯js写的AJAX程序：

<html>
<head>
<script src="js/selectcustomer_xml.js"></script>
<script src="js/jquery-2.1.3.min.js"></script>
</head>
<body>

	<form action="">
		<label>选择客户： <select name="customers"
			οnchange="showCustomer(this.value)">
				<option value="1">Alfreds Futterkiste</option>
				<option value="2">North/South</option>
				<option value="3">Wolski Zajazd</option>
		</select>
		</label>
	</form>

	<b><span id="companyname"></span>
	</b>
	<br />
	<span id="contactname"></span>
	<br />
	<span id="address"></span>
	<span id="city"></span>
	<br />
	<span id="country"></span>

</body>
</html>

jsp文件不变：

<%@ page pageEncoding="UTF-8" import="java.sql.*,java.io.*" %>

<%
	String q = request.getParameter("q");
	System.out.println(q);
	Connection conn = null;
	Statement stmt = null;
	try{
		String url= "jdbc:mysql://localhost:3306/test?user=root&password=root&useUnicode=true&characterEncoding=GB2312";
		Class.forName("com.mysql.jdbc.Driver").newInstance();
	    conn= DriverManager.getConnection(url);
	  
		String sql="SELECT * FROM CUSTOMERS ";
		sql=sql+" WHERE CUSTOMERID='"+q+"'";
		stmt = conn.createStatement();
		ResultSet rs = stmt.executeQuery(sql);
		
		response.setCharacterEncoding("utf-8");
		response.setHeader("ContentType","text/xml");
		response.setContentType("text/xml;charset=utf-8");
		//out.clear();
		PrintWriter out1 = response.getWriter();
		//out1.flush();
		out1.print("<?xml version='1.0' encoding='UTF-8'?>");
		while(rs.next()){
			System.out.println(rs.getString("companyname"));
			out1.print("<company>");
			out1.print("<compname>" +rs.getString("companyname")+ "</compname>");
			out1.print("<contname>" +rs.getString("contactname")+ "</contname>");
			out1.print("<address>" +rs.getString("address")+ "</address>");
			out1.print("<city>" +rs.getString("city")+ "</city>");
			out1.print("<country>"+rs.getString("country")+ "</country>");
			out1.print("</company>");
		}
		out1.flush();
	}catch(Exception e){
		out.print(e.getMessage());
	}finally{
		stmt.close();
		conn.close();
	}
%>

主要是js部分使用了jquery的脚本：

function showCustomer(str) {
	$.ajax( { 
	    url:'jsp/getcustomer_xml.jsp',// 跳转到 action    
	    data:{    
	        q : str    
	    },    
	    type:'post',    
	    cache:false,    
	    dataType:'xml',
	    success:function(xmlDoc) {    
	    	 /*alert(xmlDoc);*/
	    	/* document.getElementById("companyname").innerHTML = xmlDoc
				.getElementsByTagName("compname")[0].childNodes[0].nodeValue;
	    	 document.getElementById("contactname").innerHTML = xmlDoc
				.getElementsByTagName("contname")[0].childNodes[0].nodeValue;
	    	 document.getElementById("address").innerHTML = xmlDoc
				.getElementsByTagName("address")[0].childNodes[0].nodeValue;
	    	 document.getElementById("city").innerHTML = xmlDoc
				.getElementsByTagName("city")[0].childNodes[0].nodeValue;
	    	 document.getElementById("country").innerHTML = xmlDoc
				.getElementsByTagName("country")[0].childNodes[0].nodeValue;*/
	    	 $(xmlDoc).find('company').each(function()
	         {
	    		 $("#companyname").html($(this).children("compname").text());
	    		 $("#contactname").html($(this).children("contname").text());
	    		 $("#address").html($(this).children("address").text());
	    		 $("#city").html($(this).children("city").text());
	    		 $("#country").html($(this).children("country").text());
	    	});
	     },    
	     error : function() {    
	          // view("异常！");    
	          alert("异常！");    
	     }   
	}); 
	
}