`
lxs647
  • 浏览: 523265 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery Ajax获取返回html中指定的内容

 
阅读更多

比如search功能,输入关键字,在数据库中查找对应的包含关键字的记录并显示在页面上,在一段Ajax请求之后,返回html text。。。

 

需要在返回的html中找到指定id的内容用来更新页面中的对应的html内容。。。

 

比如页面:

 

   <div id="test">
    <c:forEach var="solution" items="${mySolutions}">
        <div class="solution">
            <div class="span-1"><img src="${pageContext.request.contextPath}/resources/images/SolutionItem.png"></img></div>
            <div class="span-18">
                <div class="solutionName"><a href="view/${solution.id}">${solution.name}</a></div>
                <div class="solutionDescription">${solution.shortDescription}</div>
            </div>
            <div class="span-2" id="tag_${solution.id}">
                <div>
                    <a href="#" onclick="addTag('${solution.id}')">add</a>
                    more
                </div>
                <div><textarea style="width:75; height:25; overflow: auto;" rows="3" cols="5">111111111</textarea></div>
                <div><textarea style="width:75; height:25; overflow: auto;" rows="3" cols="5">222222222</textarea></div>
                <div><textarea style="width:75; height:25; overflow: auto;" rows="3" cols="5">333333333</textarea></div>
            </div>
            <div class="span-3 last"><img src="${pageContext.request.contextPath}/resources/images/sample-solution.jpg" class="solutionIcon" alt="Solution Icon"></img></div>
   
            <div class="span-24 last solutionSplitter">
                <hr/>
            </div>
        </div>
    </c:forEach>
</div>

 

 

这个时候采用ajax局部更新:

如下:

 

$.ajax({
	type : "POST",
	url : 'test.jsp',
	dataType : "html",
	success: function(data) {
	    alert( data ); // shows whole dom
	    //alert( $(data).find('#test').html() ); // returns null
            $("#test").html($(data).find("#test").html());


        },
	error : function() {
	    alert("Sorry, The requested property could not be found.");
	}
});







http://api.jquery.com/jQuery.ajax/#options



 
分享到:
评论

相关推荐

    jQuery中ajax请求后台返回json数据并渲染HTML的方法

    本文介绍了如何在jQuery中通过AJAX请求从后台获取JSON格式的数据,并将这些数据动态地渲染到HTML中去。具体的知识点可以分为以下几个方面: 1. jQuery的AJAX方法:在文章中,通过使用jQuery提供的$.ajax()方法来...

    Jquery ajax方式读取txt文件、Jquery分页.

    // 使用AJAX获取对应页的数据,例如: $.ajax({ // ... success: function(data) { // 更新页面内容,显示当前页的数据 } }); } ``` `onPageClick`回调函数会在用户点击分页链接时触发,你可以在这里加载相应...

    ajax 获取文件路径

    在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种技术,它允许我们在不刷新整个页面的情况下,与服务器交换数据并更新部分网页内容。这里提到的"ajax jsp获取本地文件夹所有的路径"是一个示例,它展示了...

    Jquery Ajax分页(有实例)

    - **处理服务器响应**:成功回调函数中,将返回的数据插入到页面的指定位置,完成内容的更新。 - **更新分页状态**:根据返回的总页数,调整分页按钮的状态,如禁用“上一页”/“下一页”按钮,或显示/隐藏页码。 ...

    JqueryAjax简单实例

    在这个"JqueryAjax简单实例"中,我们主要关注如何在Visual Studio 2005 C#环境下利用jQuery实现AJAX的功能。首先,我们需要确保项目中已经引入了jQuery库。这通常通过在HTML头部添加jQuery库的CDN链接或者将jQuery....

    jQuery实现的纯HTML模板进行ajax数据绑定

    标题中的“jQuery实现的纯HTML模板进行ajax数据绑定”指的是使用jQuery库来处理HTML模板,并通过AJAX技术动态地从服务器获取JSON数据,然后将这些数据绑定到模板中,实现页面内容的动态更新,无需刷新整个页面。...

    传智播客 jQuery ajax 课件

    本篇文章将深入解析jQuery中的AJAX应用,结合传智播客的课件内容,帮助读者掌握这一核心技术。 首先,我们需要了解AJAX的基本概念。AJAX并不是一个单一的技术,而是一种使用现有技术组合的方式,主要包括...

    jQuery ajax读取json文件内容

    其中,使用jQuery的Ajax功能来读取JSON文件内容是前端开发中的常见需求,尤其在动态加载数据、实现异步交互方面发挥着重要作用。 ### 标题解析:“jQuery ajax读取json文件内容” 此标题直截了当,明确指出将通过...

    jQuery-ajax-用户名异步请求

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能,特别是如何利用它进行异步用户名验证。Ajax,即Asynchronous JavaScript and ...

    Jquery跨域Ajax请求测试

    在"JqueryWebServiceTestDemo"这个示例中,可能包含了完整的前端HTML、CSS和JavaScript文件,以及可能的服务端接口文档或示例代码,用于演示如何在实际项目中运用jQuery进行跨域Ajax请求。通过学习和运行这个示例,...

    JQueryAjax的简介

    .load() 方法是 jQuery 提供的一个非常实用的方法,用于从服务器请求数据并将这些数据插入到指定的 HTML 元素中。它的基本语法如下: ```javascript $(selector).load(url, data, callback); ``` - **selector**:...

    ajax+jquery获取数据.doc

    在探讨“ajax+jquery获取数据”的主题时,我们首先需要理解AJAX(Asynchronous JavaScript and XML)和jQuery在Web开发中的角色与应用。AJAX是一种用于创建更快、更响应式的Web应用程序的技术,它允许在不重新加载...

    java程序使用jquery AJAX

    Java程序与jQuery AJAX的结合是Web开发中常见的一种技术组合,用于实现页面的无刷新更新。在本篇文章中,我们将深入探讨如何在Java后端与前端利用jQuery的AJAX功能进行交互,提升用户体验。 首先,jQuery是一个强大...

    jquery ajax跨域html前台 php后台

    综上所述,本示例中的"jquery ajax json 跨域"是通过jQuery的Ajax和JSONP机制,配合PHP服务器的响应,实现了HTML与PHP之间的跨域数据交互。通过理解这些核心概念和代码示例,你可以更好地应对实际开发中的跨域挑战。

    jQuery中ajax获取数据赋值给页面的实例

    jQuery中使用Ajax技术获取数据并将其赋值给页面元素的示例涉及了前端开发中相当重要的知识点,包括HTML、PHP后端数据处理以及jQuery的Ajax操作。接下来,我们将对这些技术点进行详细介绍。 首先,HTML部分展示了一...

    jquery+ajax分页

    3. **AJAX请求**:`loadPage`函数会发送一个AJAX请求到服务器,获取指定页码的数据。 ```javascript function loadPage(pageNum) { $.ajax({ url: "fetch_data.php", // 服务器接口URL type: "POST", data: { ...

    jQuery的ajax在CI框架中的应用

    4. **$.load()**:用于动态加载HTML内容到指定元素中,如: ```javascript $("#element").load("http://example.com/page #content"); ``` **二、CI框架中的Ajax响应** 1. **配置URL**:在CI中,你需要确保URL ...

    jquery-ajax最简单的实力

    3. **$.ajax()配置**:在事件处理函数中,设置$.ajax()的URL指向XML文件,并指定类型为GET。成功回调函数将接收到服务器返回的数据,解析XML并填充城市下拉框。 4. **XML解析**:使用jQuery的`.find()`和`.each()`...

    jquery的ajax方法

    **jQuery的Ajax方法**是JavaScript库中的核心特性之一,它为开发者提供了简单、高效的数据交互方式,无需刷新页面即可实现异步与服务器进行通信。在Web开发中,jQuery的Ajax功能极大地简化了XMLHttpRequest对象的...

    Jquery和ajax结合使用的小例子

    这些例子可能包括如何使用Ajax获取和更新数据、处理服务器响应、以及如何在不刷新页面的情况下更新DOM元素。 总的来说,jQuery与Ajax的结合使得Web应用可以更加动态和响应式,提高了用户交互体验。对于初学者来说,...

Global site tag (gtag.js) - Google Analytics