`

jquery发送ajax请求返回数据格式

阅读更多

jquery向服务器发送一个ajax请求后,可以返回多种类型的数据格式,包括:html,xml,json,text等。

1.html格式的数据

"<div class='comment'><h6> "+username+" :</h6><p class='para'> "+content+" </p></div>"

服务器端返回数据格式是html片段,因此不需要经过处理就可以将新的html数据插入到主页面中,这种方法虽然简便,但是重用性不强。

$.ajax({

   type:"POST",

   url:"Handler.ashx",

   dataType:html,

   data:{username:$("#name").val(),password:$("#pwd").val()},

   success:function(data){

     $("#result").html(data);

   }

}

2.XML格式的数据

Response.Write("<?xml version=""1.0"" encoding=""utf-8""?>")
Response.Write("<comments>")
Response.Write("<comment username='"+username+"'>")
Response.Write("<content>"+content+"</content>")
Response.Write("</comment>")
Response.Write("</comments>")

Response.End();

由于服务器端返回的数据格式是XML文档,因此需要对文档的数据进行处理。

$.ajax({

   type:"POST",

   url:"Handler.ashx",

   dataType:xml,

   data:{username:$("#name").val(),password:$("#pwd").val()},

   success:function(data){

     var username = $(data).find("comment").attr("username");
     var content = $(data).find("comment content").text();
     var txtHtml = "<div class='comment'><h6>"+      username+":</h6><p class='para'>"+content+"</p></div>";
    
 $("#result").html(txtHtml)

   }

}

3.JSON格式的数据

Response.Write("{ username : '"+username+"' , content : '"+content+"'}") 

由于服务器端返回的数据格式是JSON文档,因此也需要对文档的数据进行处理,但是JSON文档比较XML文档更容易解析。

$.ajax({

   type:"POST",

   url:"Handler.ashx",

   dataType:json,

   data:{username:$("#name").val(),password:$("#pwd").val()},

   success:function(data){

     var username = data.username;
     var content = data.content;
     var txtHtml = "<div class='comment'><h6>"+      username+":</h6><p class='para'>"+content+"</p></div>";
    
 $("#result").html(txtHtml)

   }

}

分享到:
评论

相关推荐

    为jquery的ajax请求添加超时timeout时间的操作方法

    当客户端向服务器发送Ajax请求时,如果服务器没有在合理的时间内响应,就会造成用户界面的卡顿,甚至导致用户的不良体验。 首先,我们来了解下jQuery中Ajax请求的超时timeout属性。在Ajax请求中设置timeout属性可以...

    jQuery实现动态增加行,发送Ajax请求返回HTML

    以上就是使用jQuery实现动态增加行并发送Ajax请求的基本流程。在实际应用中,你可能需要根据项目需求进行适当的调整,例如添加数据验证、错误提示等功能。此外,`dynamicAddRow.zip`文件可能包含了一个示例项目,你...

    jQuery-ajax-用户名异步请求

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

    JQuery发送Ajax请求Struts2,并返回JSON的例子

    在Struts2中,我们可以配置Action类来处理Ajax请求,并以JSON格式返回数据。 以下是一个简单的示例步骤: 1. **前端设置**: 在HTML页面中,使用jQuery发起Ajax请求。例如: ```javascript $.ajax({ url: ...

    一个完整的jquery+ajax传送请求的实例

    总结来说,这个jQuery+AJAX的实例展示了如何利用jQuery的$.ajax方法进行异步数据请求,包括设置请求参数、处理返回数据和异常情况。在实际开发中,我们需要根据项目需求灵活运用这些技巧,以实现高效、友好的前端...

    jquery跨域请求示例分享(jquery发送ajax请求)

    尤其在AJAX请求方面,jQuery提供了便捷的方法,使得跨域请求成为可能。跨域请求是指在不同域名下的网页之间的HTTP请求,由于安全原因,浏览器限制了网页只能访问与自身同源的资源。 首先,跨域请求问题源于同源策略...

    浅析jQuery Ajax请求参数和返回数据的处理

    ### jQuery Ajax请求参数和返回数据处理知识点 #### jQuery Ajax基础知识 jQuery Ajax是基于JavaScript的异步请求技术,允许浏览器在不刷新页面的情况下从服务器获取数据或向服务器发送数据。在jQuery中,有多种...

    Java通过jQuery实现ajax异步请求

    综上所述,"Java通过jQuery实现ajax异步请求"的示例工程涵盖了客户端与服务器端的交互流程,包括使用jQuery发起AJAX请求、Java后端处理请求并返回数据,以及数据格式的转换和错误处理。了解并掌握这些知识点,对于...

    JQuery发起ajax请求Struts2,并操作JSON数据的例子

    在本例中,Struts2的Action将处理jQuery发起的Ajax请求,并返回JSON格式的数据。 **JSON (JavaScript Object Notation)** 是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在Ajax请求中...

    SSH1,JQuery的ajax返回json二维数组处理过程

    当用户点击“查看详情”按钮时,可能需要发送另一个AJAX请求获取详细信息,并将其显示在`#contentclass`元素内。 在服务器端,SSH1框架中的控制器(Controller)负责处理请求,查询数据库(可能使用Hibernate作为...

    jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    JSON(JavaScript Object ...本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据。阅读本文的读者应该具备jQuery、Ajax、PHP相关知识,并能熟练运用。 XHTML &lt;li&gt;&lt;a&gt;张三&lt;/a&gt;&lt;/li&gt; &lt;li

    Asp.Net MVC之jQuery与AJAX操作实例

    1. 发送AJAX请求:jQuery提供了`$.ajax()`方法,可以方便地发起AJAX请求。例如: ```javascript $.ajax({ url: '/Home/GetData', // MVC控制器和动作方法 type: 'GET', dataType: 'json', success: function...

    使用jQuery处理AJAX请求的基础学习教程

    使用jQuery处理AJAX请求,不仅可以简化代码,还能提高开发效率。本教程将从基础知识开始,逐步引导读者深入理解使用jQuery处理AJAX请求的方法和技巧。 首先,我们需要了解jQuery中处理AJAX请求的基本语法。jQuery...

    jquery,ajax的几个小例子

    这可以通过监听第一个下拉框的change事件,然后发送Ajax请求获取新的选项数据,最后更新第二个下拉框。自动补全功能常用于输入框,当用户输入时,后台会返回匹配的建议列表。这通常结合keyup事件和$.ajax()实现,...

    jQuery中使用Ajax获取JSON格式数据示例代码.pdf

    jQuery中的Ajax支持让我们可以通过简单的方法来执行AJAX请求。 #### 3. $.getJSON() 方法 `$.getJSON()` 是 jQuery 提供的一个简洁的 Ajax 方法,专门用来处理 JSON 数据格式的请求。其语法形式简洁,隐藏了 jQuery...

    Jquery Ajax 前后台数据传输

    同时,通过`$.ajaxStop()`和`$.ajaxStart()`可以监听所有AJAX请求的开始和结束。 在实际应用中,可能还需要处理跨域请求、缓存策略、进度回调等问题。总的来说,jQuery的AJAX功能强大且灵活,能够满足各种复杂的前...

    jQuery实现分页功能(含ajax请求、后台数据、附完整demo)

    本文介绍的知识点涵盖了jQuery实现分页功能的多个方面,从AJAX请求的发送、模拟后台数据、分页逻辑的实现到代码的具体参数说明,以及实现过程中可能遇到的优缺点分析。通过示例代码和详细的分析,可以帮助开发者更好...

    基于jQuery的Ajax聊天室程序

    在本聊天室中,jQuery提供了方便的方法来操作DOM元素,监听用户输入,以及发起Ajax请求。 2. **Ajax**:Ajax的核心是创建XMLHttpRequest对象,用于与服务器进行异步通信。在聊天室中,当用户发送消息时,jQuery的$....

    JQuery发送ajax请求时中文乱码问题解决

    总结以上所述,要解决JQuery发送ajax请求时出现的中文乱码问题,需要从两个方面着手:确保Web项目的web.xml配置文件中设置了正确的字符编码过滤器,以及在JSP页面中设置了正确的字符编码,并使用POST方法发送ajax...

    ajax通过jquery传递的原理

    jQuery 自动处理 JSONP 请求,只需在 URL 中加入特定的回调函数名参数,服务器端返回包裹在该函数调用中的 JSON 数据。 另外,jQuery 的 `load()` 方法是 `$.ajax()` 的一种简化形式,它主要用于加载 HTML 内容。...

Global site tag (gtag.js) - Google Analytics