1、$.post() 和$.ajax() 基本类似,但是更简化了一些。jQuery插件中,$.post底层最终调用的还是$.ajax():
2,jsp页面:
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.post("XmlServlet",{
name: $("#name").val()
},function(datas,status){
var name = $(datas).find("name").text();
var age = $(datas).find("age").text();
var address = $(datas).find("address").text();
var email = $(datas).find("email").text();
//生成表格的形式显示到页面中
var html = "<table width='50%' border='1' align='center'><tr><th>name</th><th>age</th><th>address</th><th>address</th></tr><tr><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td><td>"+email+"</td></tr></table>";
$("#theBody table:eq(0)").remove();
$("#theBody").append(html);
});
});
});
</script>
</head>
<body id="theBody">
<select id="name" name="name">
<option value="tomcat">Tom Cat</option>
<option value="android">Android</option>
</select>
<input type="button" name="btn" id="btn" value="Get XML from server">
</body>
2、请求的后台服务Servlet:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//接受前台传过来的参数name
String name = request.getParameter("name");
Person person = new Person();
if("tomcat".equals(name)){
person.setName("tomcat");
person.setAge(23);
person.setAddress("北京");
person.setEmail("tomcat@126.com");
}else if("android".equals(name)){
person = new Person();
person.setName("android");
person.setAge(12);
person.setAddress("上海");
person.setEmail("android@163.com");
}
Document document = DocumentHelper.createDocument();
Element rootElement = document.addElement("users");
rootElement.addComment("This ia a commnet");
Element userElement = rootElement.addElement("user");
Element nameElement = userElement.addElement("name");
Element ageElement = userElement.addElement("age");
Element addressElement = userElement.addElement("address");
Element emailElement = userElement.addElement("email");
nameElement.setText(person.getName());
ageElement.setText("" + person.getAge());
addressElement.setText(person.getAddress());
emailElement.setText(person.getEmail());
//服务器应该返回的是xml文档
response.setContentType("text/xml; charset=utf-8");
//清理缓存
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
//输出到客户端用PrintWriter
PrintWriter out = response.getWriter();
//格式化xml文档
OutputFormat format = OutputFormat.createPrettyPrint();
format.setEncoding("utf-8");
//用XmlWriter写到客户端
XMLWriter writer = new XMLWriter(out,format);
writer.write(document);
//关闭输出流
out.flush();
}
分享到:
相关推荐
而Jquery库提供了一系列封装好的Ajax函数,如$.get(), $.post(), $.ajax(), 和$.getJSON(),这些函数简化了前端开发者与后端数据交互的过程。 ### 1. $.get() `$.get()`函数是最简单的一种异步请求方式,它发送一...
本篇将详细介绍如何解决jQuery跨域问题,涉及的方法包括$.get、$.post和$.getJSON等。 首先,我们需要理解什么是跨域。同源策略是浏览器为保障安全而实施的一项机制,它规定JavaScript只能访问与当前页面同源(协议...
本文将详细探讨 `$.post()` 的使用方法,特别是在传递 JSON 数据时的应用。 #### 一、`$.post()` 基础介绍 `$.post()` 是 jQuery 提供的一个用于发起 POST 请求的方法,它的基本语法如下: ```javascript $.post...
本篇文章将深入探讨jQuery中的异步调用方法,包括`$.ajax()`,`$.post()`和`$.get()`,以及它们在实际开发中的应用。 首先,`$.ajax()`是jQuery提供的最强大的异步数据请求函数,它支持多种HTTP请求方法,如GET、...
本篇文章将聚焦于一种非传统的前台传值方法——使用jQuery的$.post函数。 $.post是jQuery库中的一个 AJAX 方法,它允许我们在不刷新页面的情况下向服务器发送异步POST请求。这种方法相比于传统的表单提交,更加灵活...
$.post()方法与$.get()类似,都是简化了的AJAX方法。但$.post()多了一个参数:type,用来指定请求的数据类型。常见的数据类型包括html、xml和json。如果指定了json作为type,那么服务器返回的数据格式将是JSON,否则...
`$.post`和`$.ajax`是jQuery中用于实现Ajax(异步JavaScript和XML)请求的两个关键方法,它们允许我们在不刷新整个页面的情况下更新网页的部分内容,提高用户体验。 `$.post`是`$.ajax`的一个简化版本,主要用来...
在jQuery库中,$.post, $.get和$.getJSON是用于执行AJAX(Asynchronous JavaScript and XML)请求的三种主要方法,这些方法使得前端与后端服务器进行异步数据交互成为可能,无需刷新整个页面。接下来,我们将详细...
然而,当遇到"jQueryPost页面不能刷新"的问题时,这通常意味着在使用`$.post`函数时存在错误,导致页面无法正常刷新或数据更新不成功。根据提供的描述和部分代码,我们可以分析并解决这个问题。 首先,让我们看看...
示例代码展示了$.post方法的典型用法。在一个下拉列表中选择不同选项时,页面中的JavaScript会捕捉到变化,并通过$.post方法向服务器发送一个请求。请求中包含一个名为“id”的参数,其值来自于下拉列表当前选中的项...
在jQuery库中,$.get()和$.post()是两种非常常用的Ajax请求方法,它们用于向服务器发送异步请求,获取或提交数据,而无需刷新整个页面。这些方法都是全局函数,与jQuery对象的方法如.load()有所不同,后者是对特定...
JavaScript 和 jQuery 提供了多种方式来执行 AJAX(Asynchronous JavaScript and XML)请求,其中 `$.post` 和 `$.ajax` 是最常用的两个方法。AJAX 允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容...
$.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个...
在上述示例中,我们使用了$.ajax方法,设置type为'POST',data为JSON对象,dataType为'json',以发送JSON数据到服务器并接收JSON响应: ```javascript $.ajax({ url: 'api.php', type: 'POST', data: JSON....
对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when…done…fail…then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下面的$.ajax写法,看起来很乱 $.ajax({ url...
在提供的代码示例中,`extend`函数接受一个可选参数`arr`,并使用`$.extend()`方法将其与一个预设的对象合并。如果`arr`未定义或为`null`,`$.extend()`会使用空对象`{}`作为源对象,这样就不会改变目标对象的原始...
在JavaScript的世界里,jQuery库提供了一种简便的方式来与服务器进行异步交互,这就是$.ajax方法。这个功能强大的函数使得前端开发者无需刷新整个页面就能获取或发送数据,极大地提升了用户体验。本文将深入探讨如何...
这篇文章主要讲述了在使用$.post方法时,遇到的一个常见问题——如何正确设置请求类型(type)。 首先,需要了解$.post方法的基本结构。$.post() 是一个简化AJAX请求的函数,它接受四个参数:URL地址、发送到服务器...