GVKun编程网logo

JSP/Servlet开发——第十一章 Ajax交互扩展(ajax和jsp交互)

13

想了解JSP/Servlet开发——第十一章Ajax交互扩展的新动态吗?本文将为您提供详细的信息,我们还将为您解答关于ajax和jsp交互的相关问题,此外,我们还将为您介绍关于accp8.0转换教材第

想了解JSP/Servlet开发——第十一章 Ajax交互扩展的新动态吗?本文将为您提供详细的信息,我们还将为您解答关于ajax和jsp交互的相关问题,此外,我们还将为您介绍关于accp8.0转换教材第11章Ajax交互扩展理解与练习、Ajax + jsp +servlet 中文乱码问题解决办法、AJAX Servlet实现数据异步交互的方法、Ajax 异步处理 servlet 交互的新知识。

本文目录一览:

JSP/Servlet开发——第十一章 Ajax交互扩展(ajax和jsp交互)

JSP/Servlet开发——第十一章 Ajax交互扩展(ajax和jsp交互)

1、 jQuery实现Ajax的方法:

除了$.ajax()方法以外,jQuery还提供了其他多种更简单的 Ajax 实现方法,如$.get()、$.post()、$.getJSON()、对象.load()等方法;

●$.get()方法:是 jQuery 封装的发送 HTTP GET 请求从服务器加载数据的Ajax方法;  

  语法:$.get( url [, data] [, success] [, dataType] );

       $.get()方法常用参数:

参  数

类  型

说      明

url

String

必选,规定将请求到哪个URL,(发送请求的地址)

data

PlainObject 或 String

可选,规定连同请求发送到服务器的数据

success

Function( PlainObject Date,String textStatus, jqXHR  jqxhr )

可选,请求成功后调用的函数;

参数Date:可选,服务器返回的结果数据;

参数textStatus:可选,描述请求状态的字符串;

参数jqxhr:可选,jqxhr是XMLHttpResult的超集;

如果指定了dataType,则必须提供此参数。如果没有事情需要处理,可以使用null或jQuery()空方法作占位符;

dataType

String

可选,预期服务器返回的数据类型,可用类型包括:XML、HTML、Script、JSON、JSONP、Text;

 

●$.post()方法:是 jQuery 封装的发送 HTTP POST请求从服务器加载数据的Ajax方法;

  语法:$.post( url [, data] [, success] [, dataType] );

      ◆$.post()方法常用的参数:

参  数

类  型

说      明

url

String

必选,规定将请求到哪个URL,(发送请求的地址)

data

PlainObject 或 String

可选,规定连同请求发送到服务器的数据

success

Function(PlainObject Date,String textStatus, jqXHR  jqxhr)

可选,请求成功后调用的函数;

参数Date:可选,服务器返回的结果数据;

参数textStatus:可选,描述请求状态的字符串;

参数jqxhr:可选,jqxhr是XMLHttpResult的超集;

如果指定了dataType,则必须提供此参数。但是可以使用null方法作占位符

dataType

String

预期服务器返回的数据类型,包括:XML、HTML、Script、JSON、JSONP、Text

 

●$.getJSON()方法:由于使用Ajax技术实现异步请求时,经常采用JSON数据格式作为相遇内容的载体,为了简化此种情况下的方法调用,jQuery提供了此方法;

     语法:$.getJSON( url [, data] [, success] );

       ◆$.getJSON()方法常用的参数:

参  数

类  型

说      明

url

String

必选,规定将请求到哪个URL,(发送请求的地址)

data

PlainObject 或 String

可选,规定连同请求发送到服务器的数据

success

Function( PlainObject  data, String  textStatus, jqXHR  jqxhr )

可选,请求成功后调用的函数;

参数Date:可选,服务器返回的结果数据;

参数textStatus:可选,描述请求状态的字符串;

参数jqxhr:可选,jqxhr是XMLHttpResult的超集;

       注意:$.getJSON()方法只能以GET方式发送请求;

●.load()方法:方对于通过 Ajax 请求直接加载 HTML 内容当前页面的使用场景,jQuery 也提供了 一个 . load()方法作为简易实现。该方法通过发送 Ajax 请求从

  服务器加载数据并把晌应的数据添加到指定元素中。

      语法:$( selector ).load( url [, data] [, complete] );

         ◆.load()方法常用的参数:

参  数

类  型

说      明

url

String

必选,规定将请求到哪个URL,(发送请求的地址)

data

PlainObject 或 String

可选,规定连同请求发送到服务器的数据

complete

Function(String  responseText, String  textStatus, jqXHR  jqxhr )

可选,对每个匹配的元素设置完内容后都会触发该函数;

参数responseText:可选,服务器返回的结果数据;

参数textStatus:可选,描述请求状态的字符串;

参数jqxhr:可选,jqxhr是XMLHttpResult的超集;

  ◆该方法默认使用 GET 方法发送请求,除非提供的 data 参数是一个对象 , 则使用 POST 方法发送;

  ◆该方法是最简单的从服务器获取数据的 Ajax 方法 , 它几乎与$ .get(url,data,success)方法等价;不同的是它不是全局函数,而是针对与选择器匹配的元素执行,并且它拥有匿名的回调函数,当求成功后,该方法自动将返回的数据设置为匹配元素的 HTML 内容

.load ()方法还可以仅加载远程文档的某个部分,通过 url 参数的特殊语法可以实现。url参数中可以通过空格连接决定加载内容的 jQuery 选择器,

  如以下代码:

    $ ("#result" ) . load (“article.html #starlet");

   jQuery 将会取回 article.html的内容,然后解析返回的文档,查找 id 为 target 的元素。该素连同其内容会被插入:id 为 result 的元素,所取回文档的其他部分则被丢弃;

注:$.get()、$.post()、$.getJSON()、对象.load()等常用 Ajax 方法都是基于$.ajax ()方法封装的,相比于$.ajax ()方法更加简洁、方便。通常情况下,对于一般的Ajax 功能需求使用以上 Ajax 方法即可满足(),如果需要更多的灵活性,可以使用$.ajax ()方法指定多参数;

基于表单数据的Ajax请求:

  ▲jQuery的.serializeArray()方法会从一组表单元素中检测有效控件,将其序列化成由 name 和 value()两个属性构成的 JSON 对象的数组。

    ◆其中有效控件的规则如下(检测一组表单元素中的有效控件):

      ★没有被禁用

      ★必须有name属性

      ★选中的checkbox或radio才是有效的

      ★只有触发提交事件的submit按钮才是有效的

      ★file元素不会被序列化

●$.param()

  ◆jQuery还提供了一种更简便的方式来实现将表单序列化成请求字符串的功能,即对表元素调用.serialize ()方法:$commentlnputs.serialize()方法,实际上,.serialize()方法内部就是使用 $.param()对.serializeArray()做了一个简单包装。对于不需要中间环节的情景,可以更简便地完成表单数据的序列化;

  ◆将由. serializeArray()生成的对象数组序列化成请求字符串的形式:

     语法:

     

2、使用 FastJSON生成 JSON 字符串:

FastJSON简介:FastJSON是一个性能很好的、由Java实现的JSON解析器和生成器,来自阿里巴巴,其代码托管在 GitHub 服务器上,在https://github.com/alibaba/fastjson/releases页面可以找到不同版本jar文件和源代码下载路径;FastJSON提供了把 Java 对象序列化成 JSON 字符串,以及将 JSON 字符串反序列化得到 Java对象的功能;

         

使用FastJSON  API:FastJSON  API的入口类是com.alibaba.fastjson.JSON,基本上常用的操作都可以通过该类的静态方法直接完成。

  ◆用于将 Java 对象序列化成 JSON 字符串的常用方法如下:

方      法

说      明

public static String toJSONString ( Object object )

将Java对象序列化成JSON字符串

public static String toJSONString (Object object, boolean prettyFormat )

prettyFormat为true时生成带格式的JSON字符串;

 prettyFormat为false,则与toJSONString (Object object)相同;

public static String toJSONString ( Object object, SerializerFeature… features )

可以通过参数features指定更多序列化规则;

public static String toJSONStringWithDateFormat (Object object, String dateFormat, SerializerFeature… features )

可以通过参数dateFormat指定日期类型的输出格式;

   枚举类型 SerializerFeature 定义了多种序列化属性:

       ★常用属性如下:

    枚 举 值

说      明

QuoteFieldNames

输出 JSON 的字段名时加双引号,默认即使用

WriteMapNullValue

输出值为null的字段,默认不输出

WriteNullListAsEmpty

将值为null的List字段输出为[ ]

WriteNullStringAsEmpty

将值为null的String字段输出为“”

WriteNullNumberAsZero

将值为null的数值字段输出为0

WriteNullBooleanAsFalse

将值为null的Boolean字段输出为false

SkipTransientField

忽略transient字段,默认即忽略

PrettyFormat

格式化JSON字符串,默认不格式化

     eg:序列化时要包含包含值为 null 的字段,数值为 null  输出0,String 为 null 输出“”

          String  strJSON = JSON.toJSONString ( javaObject, SerializerFeature.WriteMapNullValue,SerializerFeature.WriteNullNumberAsZero, SerializerFeature.WriteNullStringAsEmpty );

3、 jQuery 让渡$操作符:

在 jQuery 中,"$“ 符号有着重要的作用;除了 iQuery , 还有其他一些 JavaScript 脚本库也使用''$'' 符号,当项目开发中因为某些原因同时使用了 jQuery 和另一个同样使用’ $'' 符号的脚本库,就会产生冲突。

      eg:下面代码Prototype的 $ 会覆盖jQuery的 $

    <script type="text/javascript" src="../js/jquery-1.12.4.min.js" />

    <script type="text/javascript" src="../js/prototype.js" />

  eg:下面的 jQuery的 $ 会覆盖Prototype的 $

    <script type="text/javascript" src="../js/prototype.js" />

    <script type="text/javascript" src="../js/jquery-1.12.4.min.js" />

为了使jQuery能够与其他同样使用”$”符号的脚本库共同工作, jQuery定义了jQuery.noConflict()方法,放弃对$的使用权,并可以通过返回值指定一个替代符号,以免与其他脚本库冲突;

     eg:jQuery.noConflict(); // 让渡$使用权,后续jQuery代码使用jQuery代替$

    jQuery( document ).ready( … );

   或者重新指定一个替代符号:

    var  $j = jQuery.noConflict(); // 让渡$使用权,并指定用 $j 代替$

    $j( document ).ready( … );

  ◆但是论采用哪种方式,都会改变 jQuery 的编码风格,不仅更加烦琐,而且对于已有 jQuery代码的重用也会产生不利影响;

      eg:建议使用如下代码:

           

4、总结:

 
 

 

accp8.0转换教材第11章Ajax交互扩展理解与练习

accp8.0转换教材第11章Ajax交互扩展理解与练习

 

①杂记:前面有原生态JavaScript实现ajax这里又多了更简单的方法实现ajax

②$.get()方法的常用参数

参数 类型 说明
url String 必选,规定发送地址
data PlainObject或String 可选,规定请求发送的数据
success

Function(PlainObject data,

String textStatus,jqXHR jqxhr)

可选,成功后调用的函数

参数data:可选服务器返回结果

参数textStatus:可选描述请求状态

参数jqxhr:可选是XMLHttpRequest的超集

(如果指定dataType这个必选)

dataType String 可选:预期服务器返回的数据类型

③$.post()方法的常用参数同上

一.单词部分(JSON常用单词)

1.load 加载  2.serialize序列化  3.contains  包含  4.feature 特征 

5.quote  引用  6.skip 跳跃  7.transient 短暂的     8.pretty 相当

9.prototype 原型  10.conflict 冲突

二.关于JSON一些常见问题

1.jQuery实现Ajax的主要方法

①原生态实现

②$.get()和$.post()方法

③$.getJSON()方法

④.load()

2.jQuery解析表单数据

jQuery的.serializeArray()方法会从一组表单元素中检测有效控件:

①元素不能被禁用

②元素必须有name属性

③选中的checkbox才是有效的

④选中的radio才是有效的

⑤只有触发提交事件的submit按钮才是有效的

⑥file元素不会被序列化

3.jQuery与其它3

三.实现Ajax

1.使用$.get()方法实现异步验证注册邮箱

<span> 1</span> <span>$(function(){
</span><span> 2</span>         $(<span>"</span><span>#email</span><span>"</span><span>).blur(function(){
</span><span> 3</span>         <span>var</span> email=$(<span>"</span><span>#email</span><span>"</span><span>).val();
</span><span> 4</span>         <span>if</span>(email==<span>null</span> || email==<span>""</span><span>){
</span><span> 5</span>         $(<span>"</span><span>#samp</span><span>"</span>).html(<span>"</span><span>邮箱不能为空!</span><span>"</span><span>);
</span><span> 6</span> <span>        }
</span><span> 7</span>         <span>else</span><span>{
</span><span> 8</span>         $.<span>get</span>(<span>"</span><span>userServlet</span><span>"</span>,<span>"</span><span>email=</span><span>"</span>+<span>email,callBack);
</span><span> 9</span> <span>        function callBack(data){
</span><span>10</span>         <span>if</span>(data==<span>"</span><span>true</span><span>"</span><span>){
</span><span>11</span>          $(<span>"</span><span>#samp</span><span>"</span>).html(<span>"</span><span>邮箱已被注册!</span><span>"</span><span>);
</span><span>12</span> <span>        }
</span><span>13</span>         <span>else</span><span>{
</span><span>14</span>          $(<span>"</span><span>#samp</span><span>"</span>).html(<span>"</span><span>邮箱可注册!</span><span>"</span><span>);
</span><span>15</span> <span>        }
</span><span>16</span> <span>        }
</span><span>17</span> <span>        }
</span><span>18</span> <span>        });  
</span><span>19</span>         
<span>20</span>    });
登录后复制

 2.使用$.getJSON()方法加载管理员页面主题列表

<span> 1</span> $.getJSON("userServlet","por=top"<span>,callTopics);
</span><span> 2</span>     
<span> 3</span>     <span>function</span><span> callTopics(top){
</span><span> 4</span>         
<span> 5</span>         <span>var</span> $userul=$("#userul"<span>).empty();
</span><span> 6</span>         <span>for</span>(<span>var</span> i=0;itop.length;){
<span> 7</span>             <span>//</span><span>alert("ddd");</span>
<span> 8</span> <span>            $userul.append(
</span><span> 9</span>                     "
登录后复制
  • "+top[i].topics+"  修改  删除
  • " 10 ); 11 i++; 12 if(i==top.length){ 13 14 break; 15 } 16 } 17 }

    3.在Ajax中直接返回HTML内容生成主题管理页面

    <span> 1</span> <span>$.ajax({
    </span><span> 2</span>     "url":"userServlet"<span>,
    </span><span> 3</span>     "type":"GET"<span>,
    </span><span> 4</span>     "data":"por=top1"<span>,
    </span><span> 5</span>     "dataType":"html"<span>,
    </span><span> 6</span>     "success"<span>:callTopics
    </span><span> 7</span> <span>});
    </span><span> 8</span>         <span>function</span><span> callTopics(data){
    </span><span> 9</span>             $("#userul"<span>).html(data);
    </span><span>10</span>         }
    登录后复制

    4.使用.load()方法为管理员页面加载服务器生成的主题列表

    $("#userul").load("userServlet","por=top1");
    登录后复制

    5.使用Ajax实现无刷新的新闻评论功能

    <span> 1</span> <span>if</span>(por.equals("addCom"<span>)){
    </span><span> 2</span>             <span>//</span><span>上机5添加评论</span>
    <span> 3</span>             comment com=<span>new</span><span> comment();
    </span><span> 4</span>             commentdao comdao=<span>new</span><span> commentimpl();
    </span><span> 5</span>             String name=request.getParameter("cauthor1"<span>);
    </span><span> 6</span>             String ip=request.getParameter("cip"<span>);
    </span><span> 7</span>             String content=request.getParameter("ccontent"<span>);
    </span><span> 8</span>             String ctime="2017-7-4"<span>;
    </span><span> 9</span>             <span>//</span><span>time.toString();</span>
    <span>10</span> <span>            com.setCname(name);
    </span><span>11</span> <span>            com.setCcontent(content);
    </span><span>12</span> <span>            com.setCip(ip);
    </span><span>13</span> <span>            com.setCtime(ctime);
    </span><span>14</span>             <span>int</span> re=<span>comdao.addcomment(com);
    </span><span>15</span>             String result=""<span>;
    </span><span>16</span>             <span>if</span>(re&gt;0<span>){
    </span><span>17</span>                 result="success"<span>;
    </span><span>18</span>             }<span>else</span><span> {
    </span><span>19</span>                 result="添加失败!"<span>;
    </span><span>20</span> <span>            }
    </span><span>21</span>         
    <span>22</span>             
    <span>23</span>             response.setContentType("text/html;charset=UTF-8"<span>);
    </span><span>24</span>             PrintWriter out=<span>response.getWriter();
    </span><span>25</span>             out.print("[{\"result\":\""+result+"\",\"ctime\":\""+ctime+"\"}]"<span>);
    </span><span>26</span> <span>            out.flush();
    </span><span>27</span> <span>            out.close();
    </span><span>28</span>             
    <span>29</span>         }
    登录后复制

     

     6.使用FastJSON改造管理员页面加载主题列表

        topdao nd=<span>new</span><span> topimpl();
                List</span><top> listtop=<span>nd.alltop();
                String titleJson</span>=JSON.toJSONStringWithDateFormat(listtop,"yyyy-MM--dd HH:mm:ss");</top>
    登录后复制

    四.加深理解

    通过FastJSON的相关API可以简化服务器端生成的JSON字符串代码

    $.parseJSON()方法用来将JSON格式字符串解析为JSON对象

     

    以上就是accp8.0转换教材第11章Ajax交互扩展理解与练习的详细内容,更多请关注php中文网其它相关文章!

    Ajax + jsp +servlet 中文乱码问题解决办法

    Ajax + jsp +servlet 中文乱码问题解决办法

    相信大家在使用上面的方法的时候肯定遇到多中文乱码的问题,现在就来分享一下我的解决的心得


    首先,要让页面支持中文的显示我们就得设置页面的编码为GB2312或者GBK,如下

    <%@ page language="java" import="java.util.*" pageEncoding="GBK"%>


    这样页面上面显示中文就没有问题了,但是接下来会发现接受的时候会出现接受中文乱码,我的解决方法是这样的

    request.setCharacterEncoding("GBK");

    然后后面直接用

    request.getParameter();接受中文,完全没有问题(有人也用getBytes 进行转码,我一般不这样用,每个参数都这样转感觉很烦),但是又会发现,一般的表单的数据这样接受没有问题,但是一遇到Ajax 提交数据和这提交json数据来的时候就会又一次出现乱码,这时该怎么解决呢

    ,没有办法,ajax的数据只能够转码了,

    用 String p_name = new String(req.getParameter("p_name").getBytes("GBK"),"UTF-8");获得数据

    因为设置了request 设置了GBK(我们之前设置了request.setCharacterEncoding("GBK");),再在转码是把GBK转成UTF-8(我感觉原因是这样的,方法是我不断的实验出的,可行,原因自己猜测的),基本上没有问题了


    希望对大家有所帮助

    看到这篇文章的个各位,真是对不起,这里本人犯了一个错误,就是在使用request.setCharacterEncoding("GBK");接受中文是有条件的,必须前方是post提交,这个之前说漏了

    对不起,这完全是本人的失误

    AJAX Servlet实现数据异步交互的方法

    AJAX Servlet实现数据异步交互的方法

    在网上看了AJAX的一些教程,自己参考着实现一下!

    首先,导入json所需要的6个包

    下载链接:JSONObjectjar_jb51.rar

    总的目录:

    前端页面:

    首先是一个输入框:

    <input type="text" id="keyword" name="keyword" onkeyup="getContents()">

    onkeyup表示按下键盘时的操作

    javascript:

    <script type="text/javascript">
      
      //全局xmlHttp对象
      var xmlHttp;
    
      //获得xmlHttp对象
      function createXMLHttp() {
        //对于大多数浏览器适用
        var xmlHttp;
        if (window.XMLHttpRequest) {
          xmlHttp = new XMLHttpRequest();
        }
        //考虑浏览器的兼容性
        if (window.ActiveXObject) {
          xmlHttp = new ActiveXOject("Microsoft.XMLHTTP");
          if (!xmlHttp) {
            xmlHttp = new ActiveXOject("Msxml2.XMLHTTP");
          }
        }
        return xmlHttp;
      }
      
      //回调函数
      function callback() {
        //4代表完成
        if(xmlHttp.readyState == 4){
          //200代表服务器响应成功,404代表资源未找到,500服务器内部错误
          if(xmlHttp.status == 200){
            //交互成功获得响应的数据,是文本格式
            var result = xmlHttp.responseText;
            //解析获得的数据
            var json = eval("("+ result +")");
            //获得数据之后,就可以动态的显示数据了,把数据显示到输入框下面
            alert(json);
          }
        }
      }
      
      //获得输入框的内容
      function getContents(){
        //首先获得用户的输入内容,这里获得的是一个结点
        var content = document.getElementById("keyword");
        if(content.value ==""){
          return;
        }
        
        //向服务器发送内容,用到XmlHttp对象
        xmlHttp = createXMLHttp();
        //给服务器发送数据,escape()不加中文会有问题
        var url = "search?keyword=" + escape(content.value);
        //true表示js的脚本会在send()方法之后继续执行而不会等待来自服务器的响应
        xmlHttp.open("GET",url,true);
        //xmlHttp绑定回调方法,这个方法会在xmlHttp状态改变的时候调用,xmlHttp状态有0-4,
        //我们只关心4,4表示完成
        xmlHttp.onreadystatechange=callback;
        xmlHttp.send(null);
      }
    </script>
    
    

    总的index.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
      
      //全局xmlHttp对象
      var xmlHttp;
    
      //获得xmlHttp对象
      function createXMLHttp() {
        //对于大多数浏览器适用
        var xmlHttp;
        if (window.XMLHttpRequest) {
          xmlHttp = new XMLHttpRequest();
        }
        //考虑浏览器的兼容性
        if (window.ActiveXObject) {
          xmlHttp = new ActiveXOject("Microsoft.XMLHTTP");
          if (!xmlHttp) {
            xmlHttp = new ActiveXOject("Msxml2.XMLHTTP");
          }
        }
        return xmlHttp;
      }
      
      //回调函数
      function callback() {
        //4代表完成
        if(xmlHttp.readyState == 4){
          //200代表服务器响应成功,404代表资源未找到,500服务器内部错误
          if(xmlHttp.status == 200){
            //交互成功获得响应的数据,是文本格式
            var result = xmlHttp.responseText;
            //解析获得的数据
            var json = eval("("+ result +")");
            //获得数据之后,就可以动态的显示数据了,把数据显示到输入框下面
            alert(json);
          }
        }
      }
      
      //获得输入框的内容
      function getContents(){
        //首先获得用户的输入内容,这里获得的是一个结点
        var content = document.getElementById("keyword");
        if(content.value ==""){
          return;
        }
        
        //向服务器发送内容,用到XmlHttp对象
        xmlHttp = createXMLHttp();
        //给服务器发送数据,escape()不加中文会有问题
        var url = "search?keyword=" + escape(content.value);
        //true表示js的脚本会在send()方法之后继续执行而不会等待来自服务器的响应
        xmlHttp.open("GET",xmlHttp状态有0-4,
        //我们只关心4,4表示完成
        xmlHttp.onreadystatechange=callback;
        xmlHttp.send(null);
      }
    </script>
    </head>
    <body>
      <input type="text" id="keyword" name="keyword" onkeyup="getContents()">
    </body>
    </html>
    
    

    后端:

    AjaxServlet.java

    package com.loger.servlet;
    
    import java.io.IOException;
    import java.util.ArrayList;
    import java.util.List;
    
    import javax.servlet.servletexception;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import net.sf.json.JSONArray;
    
    /**
     * Servlet implementation class AjaxServlet
     */
    @WebServlet("/search")
    public class AjaxServlet extends HttpServlet {
      private static final long serialVersionUID = 1L;
      
      static List<String> list = new ArrayList<>();
      static{
        list.add("chenle");
        list.add("陈乐");
      }
        
      /**
       * @see HttpServlet#HttpServlet()
       */
      public AjaxServlet() {
        super();
        // Todo Auto-generated constructor stub
      }
    
      /**
       * @see HttpServlet#doGet(HttpServletRequest request,HttpServletResponse response)
       */
      protected void doGet(HttpServletRequest request,HttpServletResponse response) throws servletexception,IOException {
        //设置编码
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        
        //首先获得客户端发送来的数据
        String keyword = request.getParameter("keyword");
        System.out.println(keyword);
        
        
        
        //返回json数据
        response.getWriter().write(JSONArray.fromObject(list).toString());
      }
    
      /**
       * @see HttpServlet#doPost(HttpServletRequest request,HttpServletResponse response)
       */
      protected void doPost(HttpServletRequest request,IOException {
        // Todo Auto-generated method stub
      }
    
    }
    
    

    运行结果:

    这就是AJAX的实现步骤,其他在页面上把内容显示出来,如输入验证码时在旁边实时提示是否正确等操作,通过JS实现即可,由于本人没怎么学过js,就这样子吧!!!

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。

    您可能感兴趣的文章:

    • 实例解读Ajax与servlet交互的方法
    • Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
    • jQuery Ajax传值到Servlet出现乱码问题的解决方法
    • 深入Ajax代理的Java Servlet的实现详解
    • jquery请求servlet实现ajax异步请求的示例
    • Servlet+Ajax实现智能搜索框智能提示功能
    • Ajax+Servlet+jsp显示搜索效果
    • Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法
    • javaweb中ajax请求后台servlet(实例)
    • javascript请求servlet实现ajax示例(分享)
    • 关于Ajax技术中servlet末尾的输出流
    • 探讨.get .post .ajax ztree 还有后台servlet传递数据的相关知识
    • Servlet 与 Ajax 交互一直报status=parsererror的解决办法
    • Ajax+Servlet实现无刷新下拉联动效果
    • 浅谈ajax在jquery中的请求和servlet中的响应
    • Servlet3.0与纯javascript通过Ajax交互的实例详解

    Ajax 异步处理 servlet 交互

    Ajax 异步处理 servlet 交互

    首先 我要说 very 简单

    两个事儿

    1、jsp界面显示代码 :

    	jQuery.ajax({
    					url:"<%=request.getcontextpath()%>/servlet/data_jd",//将要跳转的 servlet
    					type:"post",//传值方式
    					data:"type="+selectedcity_id,//要传的值
    					dataType:"json",//返回格式
    					success:function(json){ // 返回的结果显示
    						var cc = json.array;  //这是我返回的结果  
    						cc = "["+cc+"]"; //对结果进行 处理
    						 //以上就是 Ajax 异步 前台处理 代码
    2、第二部 是servlet 中的写法, 记住要写在 dopost方法中
    首先把该定义的东西都定义好
    						response.setContentType("text/html");
    						response.setCharacterEncoding("utf-8");//这里是转码
    						request.setCharacterEncoding("utf-8");//这里是转码    (如果还是乱码,请检查此项目的编码格式,要改成UTF-8)
    						//以上是发送到客户端的相应类型
    						PrintWriter out = response.getWriter();//定义一个 out(用于写回去东西)
    						JSONArray array = new JSONArray(); //定义 集合
    						JSONObject filejson = new JSONObject(); //定义容器
    						filejson.put("array",array);//将数组存入容器
    						out.print(filejson);//返回到jsp页面
    						out.flush();//清空缓存
    						out.close();//关闭 out


    这样一来 在前台的 success 中 可以找到 返回的内容 , 你可以尝试 打印下 json.array 就是你传过来的数组


    很简单吧

    今天关于JSP/Servlet开发——第十一章 Ajax交互扩展ajax和jsp交互的讲解已经结束,谢谢您的阅读,如果想了解更多关于accp8.0转换教材第11章Ajax交互扩展理解与练习、Ajax + jsp +servlet 中文乱码问题解决办法、AJAX Servlet实现数据异步交互的方法、Ajax 异步处理 servlet 交互的相关知识,请在本站搜索。

    本文标签: