Java基础——Ajax(二)

一、jQuery 实现 ajax

$(function(){
  $("#userName").blur(function(){
  // 发ajax请求  用的函数原型: $.get(url, data, callback )
  $.get("UserServlet",{uname:$("#userName").val()},function( receiveData){
  $("#lblMsg").html(receiveData);
                   });
         });
});
//服务端UserServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
       throws ServletException, IOException {
       String userName=request.getParameter("uname");
       response.setContentType("text/html;charset=utf-8");
       response.getWriter().print("这是客户端传过来的 用户名 : "+userName+"  , 可用");  //尽量别加ln
} 

二、jQuery.ajax([options]) 详解

$("button").click(function(){
  $.ajax({
        type:"POST",   //大小写不敏感,后面别忘加  " , ""
        url:"UserServlet",   //一定要用引号扩起来
        data: {userName:$("#userName").val(),password:$("#password").val()},   // "userName=123&password=456",
        success:function(receiveData){
        $("#lblMsg").html(receiveData);
                        }
          });
       });
 //服务端
 public void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
      request.setCharacterEncoding("utf-8");  //对方如果是post请求,可以这样处理中文乱码
                
      String userName=request.getParameter("userName");
      String password=request.getParameter("password");
                        
      response.setContentType("text/html;charset=utf-8");
      response.getWriter().print("添加成功,添加的信息是"+userName+":"+password); 
} 

参数说明

-- 回调函数  beforeSend、error、dataFilter、success、complete( 当请求完成之后调用这个函数 )

-- 数据类型 dataType  /* 我们必须确保网页服务器报告的MIME类型与我们选择的dataType所匹配。

比如说,XML的话,服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。 如果指定为html类型,任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行类似的,指定script类型的话,也会先执行服务器端生成JavaScript,然后再把脚本作为一个文本数据返回。

如果指定为json类型,则会把获取到的数据作为一个JavaScript对象来解析,并且把构建好的对象作为结果返回,为了实现这个目的,他首先尝试使用JSON.parse()。

如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。

使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。

如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的jsonp参数。

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。

可用值: 

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

"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

"json": 返回 JSON 数据 。

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

"text": 返回纯文本字符串 */

--发送数据 data选项

既可以包含一个查询字符串,比如 key1=value1&key2=value2,也可以是一个映射,比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式,则数据再发送器会被转换成查询字符串

--高级选项

cache  //是否缓存 默认值是true  , (dataType为script和jsonp时默认为false)

async  //是否使用异步 默认值 为true ,默认的情况下,所有的请求都是异步请求

contentType //默认: "application/x-www-form-urlencoded")

context  /* 设置Ajax相关回调函数的上下文 

$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}}); */  

Ajax 中文乱码问题(分两种情况)

1.对于Ajax  发的 post请求,服务端只需要 :

request.setCharacterEncoding("utf-8");

2.对于Ajax 发的get 请求

$("#userName").blur(function(){
$.Ajax({
    url:"TestServlet",
    type:"get",    //请求方式是 get 
    cache:false,
    async:false,
    data:{userName: encodeURI($("#userName").val())},   //对含有中文的数据,进行 encodeURI(...)
    success:function(data){
        alert(data);
                }
        });
});
//服务端
String username=request.getParameter("userName");
username=URLDecoder.decode(username,"UTF-8");  //解码

 

posted @ 2017-10-10 14:54  江河湖泊  阅读(287)  评论(0编辑  收藏  举报