web开发总结----jQuery数据传递

jQuery 对 ajax 的支持

1) $.ajax(options):发送Ajax请求
options 是一个形如{key1:value1,key2:value2...}的 js 对象，用于指定发送请求的选项。
选项参数如下：
 url(string): 请求地址
 type(string): GET/POST
 data(object/string): 发送到服务器的参数
 dataType(string): 预期服务器返回的数据类型，一般有：
              json: 返回 json 字符串
              xml: 返回 xml 文档
              html: 返回的是一个 html 内容
              script: 返回的是一个 javascript 脚本
              text: 返回的是一个文本
 回调凼数 success(function):请求成功后调用的回调凼数，有两个参数：function(data , textStatus)
              data：服务器返回的数据
              textStatus：描述状态的字符串
 回调凼数 error(function):请求失败时调用的凼数，有三个参数 function(xhr , textStatus , errorThrown)
              textStatus 不 errorThrown 这两个参数只有一个可用（一般很少用）
2) $.get(url,[data],[callback],[type]) ：发送 get 请求
 url: 请求地址
 data: 请求参数，可以是一个 js 对象{"name":"zs","age":22}，也可以是一个请求字符串 "name=zs&age=22"。
 callback: 回调凼数，callback 格式 function(data,statusText){}
 type: 预期服务器返回的数据类型
3) $.post()格式同上：发送 post 请求

4) load(url)：将服务器响应插入当前 jQuery 对象匹配的 dom 元素之内
    var $obj = $(选择器);
    $obj.load(url);
5) serialize()：为了方便地向服务器传递参数，可以使用 serialize()
 serialize(): 将 jQuery 对象包含的表单或 s 表单域转换成查询字符串
 serializeArray(): 转换为一个数组，每个数组元素形如 {name:fieldName,value:fieldVal}的对象。

--------------------------前端页面-----------------------------------------------------------------------------------

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<style>
      #d1{
             width:300px;
             height:80px;
             background-color:#fff8dc;
             display:none;
      }
</style>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript">

演示： jQuery的Ajax请求
$(function(){---初始化函数
$('select').change(function(){---select元素绑定change事件

                  $('#d1').remove();---当change函数执行时将之前显示的东西清空
                  $.ajax({ ---ajax对象(括号里形如{key1:value1,key2:value2...}的 js 对象)
                            'url': 'carinfo.do',
                            'type': 'post',
                            'data': {'name':$('#s1').val()}, ---向后端发送的数据

'data': $('#s1').serialize(), 生成字符串形如name=bmw520

'data': $('#s1').serializeArray(),等价于 'data': {'name':$('#s1').val()},前者自动组装后者手动组装

                            'dataType': 'json', 'xml',
                            'success': function(data,statusText){ 接收后端正确数据data已经被转换成了js对象
                                                 $('#s1').after("<div id='d1'></div>");在id为s1的<select>元素后增加一个<div>
                                                 $('#d1').html('报价:'+ data.price + '<br/>' + ' 描述:' + data.desc);补充DIV元素内容
                                                 $('#d1').slideDown('slow'); 设置该<div>动画效果
                                                 setTimeout(function(){ $('#d1').slideUp('slow');},1000);

返回XML文本：data是一个dom节点，指向xml文档对应的那棵dom树

                                                var $obj = $(data);
                                                $('#s1').after("<div id='d1'></div>");
                                                $('#d1').html('报价:'+ $obj.find('price').text()+ '<br/> 描述:' + $obj.find('desc').text());

                                            },
                            'error': function(xhr,e1,e2){接收后端正确数据xhr：XmlHttpRequest对象e1,e2 ：具体的错误信息
                                                alert('系统错误');
                                       }
                    });
           });
    });

演示： jQuery的get请求/post请求
      $(function(){
            $('#s1').change(function(){
                  $.get(

'carinfo.do',

                           {'name':$('#s1').val()},
                           function(data,desc){---data已经转换成了js对象
                                  $('#s1').after("<div id='d1'></div>");
                                  $('#d1').html('报价:'+ data.price + '<br/>' + ' 描述:' + data.desc);
                                  $('#d1').slideDown('slow');
                                  setTimeout(function(){$('#d1').slideUp('slow');},1000);
                            },

'json'

                   );
            });
      });

演示：load 方法（类似一条数据，点击后调用load方法在该数据下显示其明细）

后端代码略：和其他的响应头html格式一样获取前端数据，处理，打印输出

$(function(){
$('a').toggle(

                 function(){
                              var airline = $(this).text();
                                $(this).next().load('airline.do',{'airline':airline});
                 },

                 function(){
                                $(this).next().empty();
                 }

);
});

</script>
</head>
<body style="font-size:30px;">
         <select style="width:120px;" id="s1" name="name">
                <option value="bmw520">宝马520</option>
                <option value="qqme">QQme</option>
                <option value="maiten">迈腾</option>
         </select>

</tr>
<tr>

</tr>
</table>
</body>
</html>

--------------------------------------后端代码----------------------------------------------------------------

servlet后端：

导入 JSON 的 Jar 包：

public class ActionServlet extends HttpServlet {
          public void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
                    String uri =request.getRequestURI();
                    String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));

                    if(path.equals("/carinfo")){
                          PrintWriter out = response.getWriter();
                          String name =request.getParameter("name");---获取页面传递参数的值
                          System. out .println(name);

response.setContentType("text/html;charset=utf-8");---返回JSON数据的字符串形式的响应格式

response.setContentType("text/xml;charset=utf-8");---返回XML文档字符串的响应格式

StringBuffer sb = new StringBuffer();
sb.append("<msg>");

                          if(name.equals("bmw520")){
                                 Car car = new Car("bmw520",50,"还行");
                                 JSONObject obj = JSONObject. fromObject (car);---java对象转换为JSON对象
                                 out.println(obj.toString());---输出JSON字符串形式数据到页面Ajax对象

                                 sb.append("<price>50</price>");
                                 sb.append("<desc>还丌错</desc>");
                         }else if(name.equals("qqme")){
                                 Car car = new Car("qqme",5,"真丌错");
                                 JSONObject obj = JSONObject. fromObject (car);
                                 out.println(obj.toString());

                                 sb.append("<price>5</price>");
                                 sb.append("<desc>非常丌错</desc>");
                        }else{
                                 Car car = new Car("maiten",18,"高性能商务车");
                                 JSONObject obj = JSONObject. fromObject (car);
                                 out.println(obj.toString());

                                 sb.append("<price>18</price>");
                                 sb.append("<desc>没开过丌知道</desc>");
                        }

sb.append("</msg>");
out.println(sb.toString()); ---输出XML文档字符串形式数据

                        out.close();
                   }
        }
}

web开发总结----jQuery数据传递

猜你喜欢