十八 JQuery&Ajax&Json&Xstream

Posted  Island

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了十八 JQuery&Ajax&Json&Xstream相关的知识,希望对你有一定的参考价值。

JQuery

1 是什么?有什么用?

  • javascript的代码类库
  • 简化代码,提高效率。write less do more 

 

1 JQuery与Servlet数据交互,load方式(少用)

语法:$("#元素id").load(url地址,callback);  callback:回调的函数

    function load() {
        $("#text01").load("/8AjaxAndJquery/DemoServlet02",
                function(responseTxt, statusTxt, xhr) {
                    alert("结果:" + responseTxt);
                    //拿到id为text01的标签,将其value设置为服务器传过来的responseTxt
                    $("#text01").val(responseTxt);
                }

        );
    }

 

JQuery与Servlet数据交互, Get方式

 语法:$.get(URL,callback);

   function get() {
     //function(接收的数据,状态码)
     $.get("/8AjaxAndJquery/DemoServlet02" , function(data,status){
         //给div添加内容,可以使用.html或者.text
         $("#div01").html(data);//可添加<font>
//          $("#div01").text("da:"+data);     
     });
   }

 

3 JQuery与Servlet数据交互,Post方式

语法:$.post(URL,data,callback);

<script type="text/javascript">
     function post() {
        //$.post(url,页面向Servlet发送的数json格式的数据,function(接收的数据,状态码) 
        $.post("/8AjaxAndJquery/DemoServlet02",{name:"zhangsan" , age:18},function(data,status){
            alert("页面接收的数据:"+data);
            $("#div01").html(data);
        });
    };
</script>

 

4 JQuery实现用户名校验 

<script type="text/javascript">    
    function checkUserName() {
        //获取输入框的内容
        var name = $("#name").val();
        //发送请求,$.post(URL,JSON,function(接收的数据,状态码))
        $.post("/8AjaxAndJquery/CheckUserNameServlet" ,{name:name}, function(data,status){
            if(data == 1){
                $("#span01").html("<font color=‘red‘>对不起!用户名已存在</font>");
            }else{
                $("#span01").html("<font color=‘red‘>恭喜!用户名可用</font>");
            }
        });        
    }
</script>

 

5   JQuery实现百度下拉框功能

1 前端JQ代码:键盘弹起事件keyup

//1捕捉键盘弹起事件
//在文档准备就绪的时候,对某一个元素进行onkeyup监听
//$(document).ready(function(){});
$(function() {
    $("#word").keyup(function() {
        //2获取输入框的值
        var word = $(this).val();
        if (word == "") {
            $("#div01").hide();
        } else {

            //3请求数据
            $.post("/8BDSearch/FindWordsServlet", {
                word : word
            }, function(data, status) {
                $("#div01").show();
                $("#div01").html(data);
            });
        }
    })
});

2 Servlet,交互查询关键字,将下拉框内容用jsp页面转发出去

rotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
      // 1 获取参数
        String word = request.getParameter("word");
      // 2 dao查询
        WordDao dao = new WordDaoImpl();
        List<WordsBean> list  =  dao.findWords(word);
      // 3  返回数据
//        response.getWriter().write("数据是:"+word);
        request.setAttribute("list", list);
        //将list.jsp里面的内容返回给页面
        request.getRequestDispatcher("list.jsp").forward(request, response);
    }

3 list.jsp,下拉框内容
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<body>
   <table style="width: 600px ; height: 200px">
   <c:forEach items="${list }" var="wordsBean" >
   <tr>
    <td>${wordsBean.words }</td>
    </tr>
   </c:forEach>
   </table>
</body>

 

6 JQuery实现省市联动,XML方式:

1 Servlet: 拿到客户端的pid,调用业务层获得城市list , 将其封装成xml对象发送给客户端

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      try {
          request.setCharacterEncoding("utf-8");
          //1 获取参数
          int pid = Integer.parseInt(request.getParameter("pid"));
          //2 找出所有城市
          CityDao dao = new CityDaoImpl();
          List<CityBean> list = dao.findCity(pid);
          
          //3 返回数据--->使用XStream将对象转成xml,传输数据:xml或者JSON
          XStream xStream = new XStream();
          //想把id做成属性
//          xStream.useAttributeFor(CityBean.class, "id");     
          //设置别名
          xStream.alias("city", CityBean.class);
          //转换一个对象成xml字符串
          String xml =  xStream.toXML(list);
//          System.out.println(xml);
          //代表返回的是文本类型的xml数据
          
          response.setContentType("text/xml;charset=UTF-8");
          response.getWriter().write(xml);
    }

 

2 前段JSP,页面整体骨架:

<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="js/city.js" charset="utf-8"></script>
<body>
省份:
<select name="province" id="province">
    <option value="">-请选择-
    <option value="1">广东
    <option value="2">湖南
    <option value="3">四川
</select>
城市:
<select name="city" id="city">
    <option value="">-请选择-
</select>
</body>

3 JS,实现省市联动功能
$(function(){ 
    // 1 找到省份元素
    $("#province").change(function(){
        //2  一旦里面的值发生改变,发送请求
        var pid = $(this).val();
        /*<list>
          <city>
            <id>1</id>
            <cname>深圳</cname>
            <pid>1</pid>
          </city>
        </list>
        */
        $.post("/8BDSearch/CityServlet",{pid:pid},function(data,status){
            //先清空以前的值:
            $("#city").html("<option value=‘‘>--请选择")
            //遍历:find方法获得当前每个元素的后代,each方法进行迭代,从data数据里面拿到所有的city,遍历一次city执行一次function方法
            $(data).find("city").each(function(){
                //this代表当前的city,取出他们的孩子,id,cname
                var id = $(this).children("id").text();
                var cname = $(this).children("cname").text();
                //给city元素赋值
                $("#city").append("<option value=‘"+id+"‘>"+cname)
            });
        });
    });
});

 

7 JQuery实现省市联动,JSON方式:

JSON和xml比较:

  • xml:臃肿
  • json:阅读性更好、容量更小(推荐使用)

常用对象:

  • JSONArray --->变成数组,集合[]
  • JSONObject --->变成简单的数据 {name:zhangsan , age:18}

 

1 Servlet: 拿到客户端的pid,调用业务层获得城市list , 将其封装成JSON对象发送给客户端

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      try {
          request.setCharacterEncoding("utf-8");
          response.setContentType("text/html;charset=UTF-8");
          //1 获取参数
          int pid = Integer.parseInt(request.getParameter("pid"));
          //2 找出所有城市
          CityDao dao = new CityDaoImpl();
          List<CityBean> list = dao.findCity(pid);
          
          //3 把list集合转JSON数据
//          JSONArray  --->变成数组,集合[]
//          JSONObject --->变成简单的数据    {name:zhangsan , age:18}
          JSONArray jsonArray = JSONArray.fromObject(list);
          String json = jsonArray.toString();
          System.out.println("json="+json);
          response.getWriter().write(json);
    }

 

2 前端JSP,页面整体骨架:
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="js/json.js" charset="utf-8"></script>
<!-- <script type="text/javascript" src="js/city.js" charset="utf-8"></script> -->
<body>
省份:
<select name="province" id="province">
    <option value="">-请选择-
    <option value="1">广东
    <option value="2">湖南
    <option value="3">四川
</select>
城市:
<select name="city" id="city">
    <option value="">-请选择-
</select>

 

3 JS,实现省市联动功能
$(function(){ 
    // 1 找到省份元素
    $("#province").change(function(){
        //2  一旦里面的值发生改变,发送请求
        var pid = $(this).val();
        /*json=[
                {"cname":"深圳","id":1,"pid":1},
                {"cname":"东莞","id":2,"pid":1}
                 ...
                ]*/
        $.post("/8BDSearch/CityServlet02",{pid:pid},function(data,status){
//         清空以前的数据
            $("#city").html("<option value=‘‘>---请选择");
          //遍历
          $(data).each(function(index , c) {
//            alert(c.cname);
             $("#city").append("<option value=‘"+c.id+"‘>"+c.cname); 
        });
        },"json");
    });
});

 

 






以上是关于十八 JQuery&Ajax&Json&Xstream的主要内容,如果未能解决你的问题,请参考以下文章

jquery(ajax)中的JS变量附加html标签

第六十八天上课 jquery( josn )和( ajax )

程序ajax请求公共组件:app-jquery-http.js

jQuery 没有在 ajax 请求的脚本标签中加载 js 文件

JS 关于AJAX异步的说明

[ajax自动刷新更新面板后,jquery不起作用