十八 JQuery&Ajax&Json&Xstream

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的更多相关文章

练习 jquery+Ajax+Json 绑定数据分类： asp.net 练习 jquery+Ajax+Json 绑定数据分类： asp.net
练习 jquery+Ajax+Json 绑定数据
Jquery+ajax+json+servlet原理和Demo
Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...
php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
基于Jquery+Ajax+Json+存储过程高效分页
在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...
如何构建ASP.NET MVC4&JQuery&AJax&JSon示例
背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...
Jquery Ajax Json ashx 实现前后台数据传输
经过一个多星期的研究,各种查找资料终于自己实现了Jquery Ajax Json ashx 的前后台数据交流功能首先一点,Ajax只能对应一个ashx文件,多余两个,如果打开异步传输的async: ...
asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...
Jquery ajax json 不执行success的原因坑爹
最近在看jQuery的API文档,在使用到jQuery的ajax时,如果指定了dataType为json,老是不执行success回调,而是执行了error回调函数,极度郁闷.后面改为1.2.6版本可 ...
jQuery +ajax +json+实现分页
正文首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据代码 ...

随机推荐

[ DLPytorch ] 注意力机制&机器翻译
MachineTranslation 实现过程 rstrip():删除 string 字符串末尾的指定字符(默认为空格). 语法:str.rstrip([chars]) 参数:chars -- 指定删 ...
subprocess.Popen()
def run(): str_shell='ipconfig' sub=subprocess.Popen(args=str_shell,shell=True,stdin=subprocess.PIPE ...
lnmp1.5安装memcache
1.安装libevent 由于Memcache用到了libevent这个库用于Socket的处理,所以需要安装libevent. # wget http://www.monkey.org/~provo ...
C++关键字总结【新手必学】
const 关键字——常量const 与definedefine是预编译器的编译指令,它从C语言兼容下来,工作方式与文本编辑器中的全局搜索和替换相似.define定义的常量的意义在它开始的地方持续到文 ...
HTML、HTML5重难点
一.XHTML与HTML的区别文档结构 XHTML DOCTYPE 是强制性的 <html>中的 XML namespace 属性是强制性的 <html>.<head& ...
AStarPathFinding
简单例子: https://blog.csdn.net/wingfourever/article/details/9274091 修饰符解释: https://zhuanlan.zhihu.com/p ...
[Misc] ZSH 常用快捷键
安装 zsh 终端执行 brew install zsh 终端执行 vim ~/.bash_profile 命令,打开 .bash_profile 文件如果没有 vim,请自行安装在打开的文件中, ...
js--滑动块
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
jdk 档案库(包含历史版本)
http://java.sun.com/products/archive/ 参考:https://blog.csdn.net/shiluyong8068/article/details/7894747 ...
nopad++将制表符替换为换行符
将制表符换位换行

十八 JQuery&Ajax&Json&Xstream

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

2 JQuery与Servlet数据交互， Get方式

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

4 JQuery实现用户名校验

5 JQuery实现百度下拉框功能

6 JQuery实现省市联动，XML方式：

7 JQuery实现省市联动，JSON方式：语法：$.post(URL,data,callback，"json(指明传输形式)");

十八 JQuery&Ajax&Json&Xstream的更多相关文章

随机推荐

热门专题

4 JQuery实现用户名校验　