1.普通的html数据格式,这个我用jquery的$.ajax()函数来实现,(jquery提供了三种函数,$.ajax(), $.get(), $.post(),从名字我们就能看出来实现方式)

ajax.jsp页面代码如下:

    <script type="text/javascript" src="scripts/jquery-1.8.1.js"></script><script type="text/javascript">/*$(function(){$("#button1").click(function(){$.ajax({type: "GET",url: "AjaxServlet",success: function(returnedData){$("#value").val(returnedData);},data: {"param1": $("#param1").val(), "param2": $("#param2").val()}});});        })*/$(function(){$("#button1").click(function(){$.ajax({  type: "POST",    //请求方式url: "AjaxServlet",  //请求的urldataType: "html",  //响应数据格式data: {'param1': $("#param1").val(), 'param2': $("#param2").val()},   //发送请求时携带的参数,以javascript对象形式写success: function(returnedData){  //响应成功回调函数,returnedDate会响应过来的数据,不管是什么格式都是returnedDate$("#value").val(returnedData);}});});});</script>

2.xml数据格式,这里使用的是jquery的$.post()方式

这里服务器端要注意一下,因为响应过来的是xml格式,所以服务端响应格式需要修改一下:

        //这段代码设置响应的数据格式resp.setContentType("text/xml charset=utf-8");//设置没有缓存resp.setHeader("pragma", "no-cache");resp.setHeader("cache-control", "no-cache");PrintWriter out = resp.getWriter();OutputFormat format = new OutputFormat();XMLWriter xmlWriter = new XMLWriter(out, format.createPrettyPrint());xmlWriter.write(document);        

前端xml.jsp代码如下:

            $("#button").click(function(){$.post("XMLServlet",{"name": $("select").val()},function(returnedData, status){var id = $(returnedData).find("id").text();var name = $(returnedData).find("name").text();var age = $(returnedData).find("age").text();var address = $(returnedData).find("address").text();var html = "<table border='1' align='center' width='50%'><tr><th>id</th><th>name</th><th>age</th><th>address</th></tr><tr><th>" + id + "</th><th>" + name + "</th><th>" + age + "</th><th>" + address + "</th></tr></table>";$("#theBody table:eq(0)").remove();$("#theBody").append(html);})})

呵呵,代码是不是比$.ajax()这种方式简化了些呢,因为响应过来的returnedDate是xml格式,jquery提供了find()方法直接可以找到xml对应的子元素,然后调用text()方法得到子元素中的value值。

3.JSON数据格式,使用的是$.get()方式,在jquery里面强烈建议使用这种格式来传输数据,因为其格式完全匹配javascript。

同样,服务器端代码需要坐下修改(这里产生json数据格式我用的是google提供的gson.jar):

        //如果返回的是xml就写成 "text/xml", 如果返回的是json则要写成 "application/json"resp.setContentType("application/json; charset=utf-8");//设置没有缓存resp.setHeader("pragma", "no-cache");resp.setHeader("cache-control", "no-cache");PrintWriter out = resp.getWriter();Gson gson = new Gson();String result = gson.toJson(list);//        System.out.println(result);
        out.println(result);out.flush();

同样前端的json.jsp代码如下:

        $(function(){$("#button1").click(function(){$.get("GsonServlet", {}, function(returnedData, status){var html = "<table border='1' align='center' width='50%'><tr><th>id</th><th>name</th><th>homeAddress</th><th>companyAddress</th></tr>";for(var i = 0; i < returnedData.length; i++){var id = returnedData[i].id;var name = returnedData[i].name;var homeAddress = returnedData[i].address.homeAddress;var companyAddress = returnedData[i].address.companyAddress;html += "<tr><th>" + id + "</th><th>" + name + "</th><th>" + homeAddress + "</th><th>" + companyAddress + "</th></tr>";}$("#body1 table:eq(0)").remove();$("#body1").append(html);})})});

转载于:https://www.cnblogs.com/toge/p/6114708.html

Ajax实现--jQuery相关推荐

  1. php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...

    这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...

  2. $.ajax data怎么处理_不会吧,不会吧,不愧是Ajax,jQuery Ajax啊

    Ajax and jQuery Ajax 我们做前端的,肯定不会只满足于写一些静态网页,我们希望做到网站(与服务器)的数据交互.不得不说,现在前端的发展真是太快了,不断的更新迭代,新的技术就如同雨后春 ...

  3. AJAX(三)jQuery AJAX.post

    在jQuery 中也提供了一个比较简单的ajax请求jQuery.post(url, [data], [callback], [type]),如果考虑出错时执行函数该方法不适合,请选择ajax 相对j ...

  4. jquery ajax自动完成,使用AJAX进行JQuery自动完成(JQuery Autocomplete with AJAX)

    使用AJAX进行JQuery自动完成(JQuery Autocomplete with AJAX) 我正在尝试编写一个JQuery自动完成脚本,它将通过AJAX调用url并在用户将数据输入表单时更新自 ...

  5. Ajax、jQuery基础入门视频教程

    关注公众号,免费获取资料 本视频是Ajax和jQuery基础入门视频,该视频针对接触过javaScript基础的学员录制,授课讲究通俗易懂.通过该视频的学习,相信您能够轻轻松松地掌握Ajax和jQue ...

  6. 第一章:AJAX与jQuery

    AJAX 第一章:AJAX与jQuery 概念:AJAX = Asynchronous JavaScript And XML(异步的 JavaScript 和 XML).阿贾克斯 AJAX 不是新的编 ...

  7. JavaScript、Ajax与jQuery的关系

    简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

  8. Promise 的基本使用 与 Ajax的jQuery封装

    Promise 的基本使用 为了解决回调地狱问题,从而给出的解决办法: /*** Promise** 1. Promise 是 一个构造函数 new Vue()* 2. Promise() 里面有个参 ...

  9. AJAX+json+jquery实现预加载瀑布流布局

    AJAX+json+jquery实现预加载瀑布流布局 转载于:https://www.cnblogs.com/zhujiabin/p/4860954.html

  10. Spring MVC:Ajax和JQuery

    今天,我想演示如何将AJAX集成到Spring MVC应用程序中. 我将在客户端使用JQuery来发送请求和接收响应. 本教程将基于我以前关于Spring MVC和REST服务的教程之一. 在本文中, ...

最新文章

  1. linux下wc命令详解
  2. 在线学html5,HTML5 在线学习自我演进的导弹系统
  3. 皮一皮:童话里都是骗人的...
  4. Unity3D深入浅出 -组件与节点之间的调用关系
  5. 如何配置MySQL?(三)
  6. 第十二届蓝桥杯大赛软件赛省赛 C/C++ 大学B组
  7. 桌面云计算机的配置,Citrix桌面云实验环境的部署配置
  8. Lumen开发:如何向 IoC 容器中添加自己定义的类
  9. Git本地仓库管理远程库(GitHub)——clone(下载)、push(提交)、pull(拉取)操作
  10. IIS安装2个SSL_顶级域名0元撸-免费注册2个腾讯云域名 免费SSL证书
  11. 资源放送丨《基于IB网络的Oracle Extend RAC最佳实践》PPT视频
  12. 联想小新模式切换不了_精彩,不止一屏!联想多款消费新品亮相秋季发布会
  13. 【重磅推出】推荐系统系列教程之九:解密“看了又看”和“买了又买”(Item-Based)...
  14. slim.conv2d以及slim.convolution2d与tf.nn.conv2d的不同
  15. “代理XP”组件已作为此服务器安全配置的一部分被关闭
  16. unity调用dll打开双目
  17. JS事件流与DOM事件处理程序
  18. PHP探测手机客户端
  19. 如何通过Tik Tok月入2w美金
  20. [转]挑礼物指南:价格不高却有格调的礼物,送给挑礼物困难症的你(多图预警)...

热门文章

  1. 利用dynamic简化数据库的访问
  2. topcoder srm 500 div1
  3. Broadcom BCM4322(如:HP 6530b)wifi不能用解决办法
  4. 突发灵感,看到某网站的搞笑图片挺多,做了一个小java,扫描抠了一些
  5. 并查集(Union-Find)算法介绍
  6. linux上利用crontab定时备份postgres数据库及文件到windows系统
  7. Javascript小括号“()”的多义性
  8. js中对函数设置默认参数值的3种方法
  9. asp.net服务器控件与html服务器控件的区别
  10. js函数 Number()、parseInt()、parseFloat()的区别: