`

jquery ajax 从后台获取数据到界面【转】

 
阅读更多

jquery ajax从后台获取

  从把需要传的元素按照格式什么,如下例子中的yesNum,noNum,然后通过response.getWriter().write()传值到前端

  StringBuffer xmlResult = new StringBuffer();
  xmlResult.append("<root>");
  xmlResult.append("<yesNum>" +yesNum + "</yesNum>");
  xmlResult.append("<noNum>" + noNum + "</noNum>");
  xmlResult.append("</root>");
  
  response.getWriter().write(xmlResult.toString());

js中申明 $.ajax在后面url中输入请求路径。在success红的data为反调函数中获取的返回的data对象

通过 each遍历xml并通过$(this).children("yesNum").text();  获取到返回的值    
var a,b;

$.ajax({
    async : false,

    cache : false,      type: 'POST',      dataType : "xml",
    url: "ac14Action.do?method=getStauts",//请求的action路径
    error: function () {//请求失败处理函数
     alert('请求失败');
    },
     success:function(data){ //请求成功后处理函数。
      $(data).find("root").each(function(){                           
              var provinceId=$(this).children("yesNum").text();      
              var provinceName=$(this).children("noNum").text();
              a=provinceId;
              b=provinceName;
              a=parseInt(a);
              b=parseInt(b);
              });
       
    }
  });

 

url String (默认: 当前页地址) 发送请求的地址。
type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
timeout Number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async Boolean (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
function
 (XMLHttpRequest) {
         this
; // the options for this ajax request


         }
cache Boolean (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。
function
 (XMLHttpRequest, textStatus) {
         this
; // the options for this ajax request


         }
contentType String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data Object,
String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataType String

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

"xml": 返回 XML 文档,可用 jQuery 处理。

"html": 返回纯文本 HTML 信息;包含 script 元素。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。
function
 (XMLHttpRequest, textStatus, errorThrown) {
         // 通常情况下textStatus和errorThown只有其中一个有值 

         this
; // the options for this ajax request


         }
global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
success Function 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
function
 (data, textStatus) {
         // data could be xmlDoc, jsonObj, html, text, etc...

         this
; // the options for this ajax request


         }
分享到:
评论

相关推荐

    Jquery Ajax 前后台数据传输

    本文将详细介绍使用jQuery AJAX实现三种不同方式的前后台数据传输,以及如何处理界面内容的传值和返回值。 1. **基本的AJAX调用** jQuery提供了`$.ajax()`方法,它是所有其他AJAX功能的基础。例如,我们可以使用...

    ajax获取后台菜单数据

    【标题】"Ajax获取后台菜单数据"涉及到的技术主要包括Ajax、JSON和Accordion,这些技术在现代Web开发中扮演着重要角色,特别是在构建动态交互式的用户界面时。 Ajax(Asynchronous JavaScript and XML)是一种创建...

    ajax从后台读json数据,jquery在页面简析

    **Ajax技术** Ajax,全称为Asynchronous JavaScript and XML(异步...通过Ajax请求获取JSON数据,并在页面上进行解析和渲染,可以在不刷新整个页面的情况下完成数据的更新,提升用户界面的响应速度和用户体验。

    php+jquery+ajax最简单例子

    5. **Ajax回调**:当Ajax请求完成,jQuery的回调函数会被调用,接收到的服务器响应数据可以在这里处理。将响应数据插入到页面的适当位置,更新用户界面。 这个例子的核心在于展示了客户端(JavaScript/jQuery/Ajax...

    基于jquery的Ajax后台模板框架

    在Ajax后台模板中,这些方法常用于动态加载和更新数据,将服务器返回的数据渲染到页面上。 ### 5. 事件监听与用户交互 为了实现动态交互,框架可能会利用jQuery的事件监听功能,如$(selector).on('click', ...

    详谈 Jquery Ajax异步处理Json数据.

    通过以上的知识点,可以了解到在Jquery Ajax异步处理JSON数据的过程中,开发者需要了解前端如何发送请求、指定期望的响应数据类型、以及如何在回调函数中处理服务器返回的JSON格式数据。这种机制使得Web应用可以提供...

    jQuery制作的后台界面

    6. **响应式设计**:考虑到现代网页需要适应不同设备和屏幕尺寸,jQuery和与其兼容的库如 Respond.js 和 Modernizr 可以帮助实现响应式布局,确保后台界面在桌面、平板和手机上都有良好的显示效果。 7. **性能优化*...

    jquery插件实现软件后台管理界面

    jQuery提供了`$.ajax`方法,便于实现异步数据加载,使后台数据实时更新无需刷新页面。配合使用`$.each`循环,可以轻松地将服务器返回的数据填充到表格中。同时,使用`$.fn.extend`可以创建自定义的插件,以封装复杂...

    html+jquery黑色经典后台界面

    5. **插件集成**:jQuery社区提供了大量插件,如统计图、日期选择器等,这些可能被整合到后台界面中,增强其功能性和视觉吸引力。例如,`Chart.js`或`Highcharts`可以用于绘制各种统计图表。 文件“html+jquery黑色...

    (jQuery+div)实现后台管理界面

    4. **AJAX交互**:使用`.ajax()`或者`.load()`方法,可以实现异步数据加载,使得后台管理界面能够在不刷新整个页面的情况下获取和更新数据。 另一方面,`div`是HTML中的一个基本布局元素,用于创建块级结构,它可以...

    MVC Jquery Ajax例子

    在用户登录和无刷新分页场景中,Ajax通过异步发送HTTP请求,获取后台数据,然后动态地更新页面,提供流畅的用户体验。 **SQL Server 2005** SQL Server 2005是微软的一款关系型数据库管理系统,用于存储和管理数据...

    jQuery+datatables插件实现ajax加载数据与增删改查功能示例

    - 具体的ajax请求和响应处理,如何把从服务器获取的数据处理并应用到表格中。 整体来看,本文档的知识点集中于如何使用jQuery和datatables插件来增强网页表格的用户体验,提供动态的数据加载以及操作功能。通过示例...

    JQUERY后台框架/后台界面

    综上所述,"JQUERY后台框架/后台界面"涉及到的知识点包括jQuery的选择器、事件处理、动画和Ajax,以及基于jQuery的后台管理框架的使用,特别是DWZ框架的应用。通过掌握这些技术,开发者可以构建出高效、美观且易于...

    jquery+servlet 异步获取数据 并显示出来(很有收获的哦!)

    最后,将这个Servlet部署到服务器,比如Tomcat,当jQuery发起请求时,Servlet会接收到请求,处理后返回数据,jQuery的success回调函数接收到数据并更新页面,实现异步数据获取和显示。 总的来说,jQuery和Servlet的...

    jquery后台管理系统模板

    同时,由于jQuery对AJAX的友好支持,使得后台数据的异步更新变得简单,大大提高了系统的实时性。 模板中的"admin-templates"可能指的是该模板包含一系列用于后台管理的页面,如登录注册、数据统计、用户管理、权限...

    jQuery-ajax-用户名异步请求

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

    Struts2+jQuery ajax的一个商品小系统

    在Ajax方面,jQuery的`$.ajax()`函数提供了一种简单的方式来发送异步请求,它可以轻松地与后台服务器进行数据交换,而无需页面刷新。在这个商品系统中,可能使用jQuery的Ajax功能来实现商品的添加、删除或更新,这些...

    jquery ui 后台界面演示系统 登陆界面

    jQuery UI标准后台页面演示系统说明 系统的设计目的 我做B/S软件开发,基本上还是采用原型法的--嗯,好吧,可能原型法还是往自己脸上贴金了。俗一点说吧,就是和客户定一个尽可能详细的功能描述文档,然后按文档写完...

    jquery ajax 分页 前端

    数据获取与处理 在JavaScript中,你需要定义一个数组或JSON对象来模拟或存储数据。例如: ```javascript var data = [ {name: "Item1", description: "Description1"}, // 更多数据项... ]; ``` ### 5. 初始化...

    解决ajax请求后台,有时收不到返回值的问题

    具体做的是个文件导入的功能,导入的功能是成功了,但是界面一直得不到返回值,排查了一下午,调试的时候是可以有返回的,但是关掉浏览器调试界面,却得不到返回结果。 原因: 一直以为是我后台程序有问题,晚上回到...

Global site tag (gtag.js) - Google Analytics