分分28官网|分分28开奖网

实验:servlet和jsp数据交互六:jQuery中的Ajax
作者:强官涛   类型:Web前端    类别:实验   日期:2017-12-08    阅读:2613 次   消耗积分:0 分

上一期博客分别介绍了js实现Ajax和jQuery的Ajax()方法实现Ajax。随着WEB前端技术的发展,开发中很少使用纯js实现Ajax,取而代之的是jQuery的Ajax实现。jQuery的Ajax实现除了上期博客中介绍的Ajax()方法外,还有load()、$.get()、$.post()、$.getScript()、$.getJson()等方法。

load()方法是jQuery中最为简单的方法,使用它可以远程载入HTML代码,并插入DOM中,它的语法结构为:load(url [,  data] [, callback])。参数url的类型是String,它表示请求的HTML页面的URL地址;data参数是可选参数,类型为Object,它表示发送到服务器的key / value数据;callback参数也是可选的,类型是函数,该函数将在请求完成是触发执行,不管请求失败还是成功,都将执行。下面 例一 给出load()方法的核心代码:

 


// 页面标签

<body>

<input type="button" id="con" onclick="ajaxMethod()" value="ajax提交"/>

<div id="showText">

<p id="show">请求数据如下:</p>

</div>

</body>

 

// js代码,包含在ajaxMethod方法内

// load() 方法

         var url = "jsp/conHtml.html";

$("#showText").load(url, function(){

alert("html文件载入成功");

});

该例子中,conHtml.html的内容会被加载到id为showText的页面元素中。参数url后面可以添加jQuery选择器,选择器和 url 之间需要一个空格。需要注意一点:load() 方法不是全局的。回调函数有三个参数,分别是请求返回的内容responseText,请求状态textStatus和XMLHttpRequest对象。

$.get()方法可以传递参数给服务器,它是jQuery的全局函数。$.get()方法使用GET方式来进行异步请求,它的语法结构:$get(url [, data] [, callback] [,type])。其参数url类型为字符串型,指向请求的HTML文件的url地址;参数data(可选)类型为Object,表示发送到服务器的键值对数据,data会被附加到url中;callback(回调函数,可选)是Function类型,当请求成功时(Response的返回状态是success)才调用改方法,请求结果和状态会自动传递给改方法;type(可选)参数类型为String,它表示服务器端返回内容的格式(格式包括xml、html、json、text等)。$.get()方法的回调函数有两个参数,data和textStatus,分别表示请求返回的内容和请求状态。下面 例二 展示如何从服务器请求一个html片段。

例二:

// 页面标签


<body>

<input type="button" id="con" onclick="ajaxMethod()" value="ajax提交"/>

<div id="showText">

<h3>请求数据如下:</h3>

<p id="show"></p>

</div>

</body>

 

// js代码

function ajaxMethod(){

// $.get() 方法

           var url = "ajaxDemo";

var data = {name:"张三",sex:"M",age:22};

 

$.get(url, data,

function(data, textStatus){

//返回数据为html片段,不需要处理,可以直接添加到页面

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

}, "html"  // type 参数一般不用设置

);

}

 

// servlet代码

response.setContentType("text/html");

response.setCharacterEncoding("utf-8");

PrintWriter out = response.getWriter();

out.println("  <span id=\"text\">返回html格式数据</span>");

out.flush();

out.close();

如果返回到前端的汉字显示乱码,需要在返回前添加response.setCharacterEncoding("utf-8")可以避免前端取出的中文数据乱码。返回html格式数据处理起来很方便,但是这种数据格式不一定能够在其他的web引用程序中得到重用。下面 例三 展示如何获取XML文档。由于服务器端返回的数据格式是XML文档,因此需要对返回的数据进行处理。处理XML文档与处理HTML文档类似,也可以使用常规的attr()、find()、filter()以及其他方法。

例三:

//  页面标签和例二一样,此处省略


// js 代码

function ajaxMethod(){

// $.get() 方法         

           var url = "ajaxDemo";

var data = {name:"张三",sex:"M",age:22};

 

$.get(url, data,

function(data, textStatus){

//返回数据为xml文档

                  var id = $(data).find("comment").attr("id");

var username = $(data).find("comment").attr("username");

var content = $(data).find("comment").text();

alert(content);

var html = "<p id='" + id +"'>" + username + "," + content + "</p>";

$("#show").html(html);

}, "xml"  // type 参数一般不用设置

);

}

 

// servlet代码

request.setCharacterEncoding("utf-8");

response.setContentType("text/xml");

response.setCharacterEncoding("utf-8");

String name = request.getParameter("name");

System.out.println(name);

PrintWriter out = response.getWriter();

String name = request.getParameter("name");

out.println("<comment id=\"userid\" username=\"张三\">张三大学本科毕业,后学习于成都蜗牛学院!</comment>");

out.flush();

out.close();

代码request.setCharacterEncoding("utf-8")用来设置请求对象中值的字符集,解决后台取出中文值乱码问题。返回数据格式为XML文档,其体积相对较大,与其他文件格式相比,解析和操作他门的速度较慢,但是XML格式数据的可移植性非常强,因此这种格式提供的数据的重用行将极大提高。

由于XML文档体积较大,解析相对比较困难和速度较慢,因此在应用中常常用到JSON文档。标准JSON对象数据格式为{"sex":"2","age":32,"name":"小马驹2","addr":"成都2"}。想要了解更多的JSON文档知识,可以访问网站。$.get()方法提交到后台,返回的JSON格式数据不能像HTML文档一样直接插入到前端页面中,需要作处理才能将数据添加到主页面中。下 例四 介绍解析JSON数据。

例四:

// 页面标签省略


//  js代码

function ajaxMethod(){        

         var url = "ajaxDemo";

var data = {name:"张三",sex:"M",age:22};

 

$.get(url, data,

function(data, textStatus){

var html = "获取到的人员姓名:";

alert(data.length);

//返回数据为JSON文档(对象和数组)

$.each(data, function(index, item){

//this为当前访问的对象,和item一样

html += this.name + ", ";

});

$("#show").html(html);

}, "json"

);

}

// servlet代码

request.setCharacterEncoding("utf-8");

//    response.setContentType("text/xml");

//    response.setContentType("text/html");

response.setContentType("text/json");

response.setCharacterEncoding("utf-8");

PrintWriter out = response.getWriter();

 

People p1 = new People("小马驹0", "男0", "成都0", 30);

People p2 = new People("小马驹1", "男1", "成都1", 31);

People p3 = new People("小马驹2", "男2", "成都2", 32);

List<People> list = new ArrayList<People>();

list.add(p3);

list.add(p2);

list.add(p1);

// list集合转成JSON数组需要三方包支持

JSONArray ja = JSONArray.fromObject(list);

System.out.println(ja.toString());

out.println(ja);

out.flush();

out.close();

例四中的$.each(data, function(index, item){}是jQuery的全局遍历函数,详情请查看jQuery的API。JSON数据格式要求非常严格,必须是{"sex":"2"},不能是{"sex":"男2"},甚至{‘sex’:"男2"}在js(JavaScript)中也可能导致整个js脚本停止运行。

通过$.get()方法的这几个例子对数据格式的使用可以看出,在不需要与其他应用程序共享数据的时候,使用HTML格式返回数据处理起来最为简单;如果需要重用数据,那么JSON格式数据是不错的选择,它文件小,性能好;当远程应用程序未知时,最好使用XML数据格式,因为它在常用的应用程序中都可以解析,就像英语一样。

$.post()方法的使用方式和$.get()方法一样,但他们还是有一定的区别,例如get请求传递参数可见,还会被浏览器缓存起来,而post请求则不会;另外,post请求传递参数的数量在理论上是没有限制的,而get方法则有限制,一般大小不超过2KB。$.post()方法的使用方式请参考$.get()方法。

$.getScript()方法允许用户加载远程的.js文件,目的是解决.js文件按需添加问题,因为有的js文件并不是一开始进入页面就需要加载的,或者一些操作不需要该js文件。其一般语法结构为:$.getScript(url , function(){  })。加载完成的.js文件不需要处理,它会自动执行。由于使用方式比较简单,这里就不举例演示。

在jQuery的Ajax方法中有一个与$.getScript()方法用法相同的方法 ---  $.getJSON() 。该方法用来加载远程的.JSON文件,一般语法格式为:$.getJSON(url, function(data){   })。回调函数中的data表示请求的数据,可以使用for循环或者$.each()函数对其遍历,数据的解析方式请参考例四。

如果需要实现更复杂的Ajax功能,请使用$.ajax(),详情参考:http://www.mountsinaibaptistchurch.org/blog/1109.html

 


蜗牛学院,只为成就更好的你!

你!敢不敢!用你三个月的时间,换你不一样的未来!

赶快关注蜗牛学院官方微信,了解更多信息吧!

20181009_153045_341.jpg

版权所有,转载本站文章请注明出处:蜗牛学院在线课堂, http://www.mountsinaibaptistchurch.org/note/37
上一篇: 资讯:蜗牛学院联合巴人互动,重磅推出“宝贝鱼计划”,践行互联网产品+团队一站式人才孵化模式
下一篇: 资讯:立秋|重庆校区迎来了一批新朋友,他们为同一个梦想而来
提示:登录后添加有效评论可享受积分哦!