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);

                }

        );

    }

2 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方式：语法：$.post(URL,data,callback，"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的更多相关文章

  1. 练习 jquery+Ajax+Json 绑定数据 分类： asp.net 练习 jquery+Ajax+Json 绑定数据 分类： asp.net

    练习 jquery+Ajax+Json 绑定数据

  2. Jquery+ajax+json+servlet原理和Demo

    Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

  3. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  4. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

  5. 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

  6. Jquery Ajax Json ashx 实现前后台数据传输

    经过一个多星期的研究,各种查找资料终于自己实现了Jquery  Ajax Json ashx 的前后台数据交流功能 首先一点,Ajax只能对应一个ashx文件,多余两个,如果打开异步传输的async: ...

  7. asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...

  8. Jquery ajax json 不执行success的原因 坑爹

    最近在看jQuery的API文档,在使用到jQuery的ajax时,如果指定了dataType为json,老是不执行success回调,而是执行了error回调函数,极度郁闷.后面改为1.2.6版本可 ...

  9. jQuery +ajax +json+实现分页

    正文 首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据 代码 ...

随机推荐

  1. Ubuntu配置Python开发环境（PyCharm、Tensorflow）

    安装JDK: https://www.cnblogs.com/wanghuixi/p/9837229.html 安装Anaconda: 安装PyCharm: https://www.cnblogs.c ...

  2. iOS APP语言国际化之应用内切换语言环境

    最近接了一个项目,需求是要做一款应用的英文版本,客户并不清楚,以为要另做一个APP.沟通后告诉他们在之前应用基础上加个国际化功能就好,把之前的语言国际化重新梳理记录一下. 一般设置更改本地语言环境后, ...

  3. float元素上-margin的用法

    css标准,float元素上的负margin表示把下面的元素向对应方向移动,并且覆盖上一个元素(这里是指html中元素的声明顺序). 标准情况下我们用float 时候是这样的. -margin通俗点说 ...

  4. 通过aptitude降级包解决依赖问题（E：无法修正错误，因为您要求某些软件包保持现状）

    Linux下的依赖关系令人头疼,尤其是提示如下错误的时候: 下列软件包有未满足的依赖关系: xxx : 依赖: xxx 但是它将不会被安装 E: 无法修正错误,因为您要求某些软件包保持现状,就是它们破 ...

  5. 10 从DFS到DFT

    从DFS到DFT 周期序列的级数展开 正如连续时间周期信号可以表示为一系列正弦信号的和的形式,周期序列也可以表示为一系列正弦之和的形式,假设序列\(\tilde{x}[n]\)的周期为\(N\),那 ...

  6. preg_replace相关问题

    preg_replace preg_replace 函数执行一个正则表达式的搜索和替换. 语法: preg_replace ( mixed $pattern , mixed $replacement ...

  7. 登陆页面的Sql注入

    自己手工注入的知识比较薄弱,这里就记录一下注入过程 题目: .登陆页面,使用sql万能密码可以登陆账号,但是flag不会自己跳出来,出题人是想让我们手工注入 常用万能密码: 'or'='or' adm ...

  8. 攻防世界Web进阶-Upload1

    进入题目 题目提示上传文件,准备好一句话木马. 发现只能上传图片文件,那么再准备一个图片的一句话木马.上传. 浏览器开代理,使用burpsuite拦截,修改文件后缀名为php,否则无法连接 使用蚁剑连 ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：联合使用所有表格类

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 显示代码：同一行代码片段: span, div

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...