zoukankan      html  css  js  c++  java
  • Ajax 执行流程 有用 一点

    l 1.1使用JavaScript获得浏览器内置的AJAX引擎(XMLHttpRequest对象)

    l 1.2 通过AJAX引擎确定请求路径和请求参数

    l 1.3 通知AJAX引擎发送请求

    l AJAX引擎会在不刷新浏览器地址栏的情况下,发送请求

    l 2.1 服务器获得请求参数

    l 2.2 服务器处理请求参数(添加、查询等操作)

    l 2.3 服务器响应数据给浏览器

    l AJAX引擎获得服务器响应的数据,通过执行JavaScript的回调函数将数据传递给浏览器页面

    l 3.1 通过设置给AJAX引擎的回调函数获得服务器响应的数据

    l 3.2 使用JavaScript在指定的位置,显示响应数据,从而局部修改页面的数据,达到局部刷新目的。

    l $.post() post请求方式发送ajax

    格式:jQuery.post(url, [data], [callback], [type])

    参数1url,请求路径

    参数2data,请求参数

    参数3callback,回调函数

    参数4type,返回内容格式,xml, html, script, json, text, _default

    服务器响应编码为:application/json;charset=UTF-8,回调函数data类型是json对象

    服务器响应编码为:text/html;charset=UTF-8,回调函数data类型是字符串。

     

     

     

    l 常用对象:

     

    n JSONObject java对象(JavaBeanMap)与JSON数据 转换工具类  对象和map集合

     

    n JSONArrayjava集合(ListArray) 与JSON数据 转换工具类

    键盘按下和抬起 实现的ajax查询数据库显示下拉列表

    条件查询的 拼音和文字都匹配的代码

    * 条件查询商品

     * @param condition

     * @param params

     * @return

     */

    public List<Product> findAll(String word) throws SQLException{

    StringBuilder builder = new StringBuilder();

    List<Object> paramsList = new ArrayList<Object>();

     

    if(word != null){

    // 拼凑关键字的属性,hao拼凑成“%h%a%o%

    StringBuilder wordBuilder = new StringBuilder();

    wordBuilder.append("%");

    for(int i = 0 ; i < word.length() ; i ++ ){

    wordBuilder.append(word.charAt(i)).append("%");   append 可以连着拼接

    }

     

    //1 汉字匹配

    builder.append(" and pname like ?");

    paramsList.add(wordBuilder.toString());

     

    //2 拼音匹配

    builder.append(" or pinyin like ?");

    paramsList.add(wordBuilder.toString());

     

    }

    //转换成需要的条件

    String condition = builder.toString();

    Object[] params = paramsList.toArray();

     

    QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource());

    String sql = "select * from product where 1=1 " + condition;

    return queryRunner.query(sql, new BeanListHandler<Product>(Product.class), params);

    }

     

    前台页面js代码

    //自动填充

    $(function(){

     

    $("#search").keyup(function(){

    var url = "/day15_autocomplete/productFindByWordServlet";

    var word = $(this).val();  获取用户输入的数据作为参数

    if(word == "") {

    //如果没有输入关键字,隐藏提供区域

    $("#completeShow").slideUp(200);

    return false;

    }

    var params = {"word":word};

    $.post(url,params,function(data){

    $("#completeShow").html("<ul id='itemul' class='list-group'></ul>");

    for(var i = 0 ; i < data.length ; i ++){

    var product = data[i];

    //处理关键字显示

    var str = ""+product.pname + "("+ product.pinyin +")";

     

    $("#itemul").append("<li class='list-group-item'><a href='#'>"+str+"</a></li>");

    $("#completeShow").show();

     

    }

    });

    }).focus(function(){

    //获得焦点时,如果有搜索项显示

    if($("#completeShow li").size() > 0){

    $("#completeShow").show();

    }

    }).click(function(){

    //如果点击的是文本框,阻止点击事件,及不触发documentclick事件

    return false;

    });

     

    /**

     * 点击其他位置时,隐藏提示区域

     */

    $(document).click(function(){

    $("#completeShow").slideUp(200);

    });

    });

     

  • 相关阅读:
    【BZOJ3190】[JLOI2013]赛车 单调栈+几何
    【BZOJ2738】矩阵乘法 整体二分
    PR 批量导入
    JAVA 水果机游戏及编码
    sap 图标查看
    ABAP 给动态变量赋值
    abap 数字移动小游戏
    FI模块与SD、MM的接口配置方法
    信用控制增强
    SAP-财务知识点
  • 原文地址:https://www.cnblogs.com/shan1393/p/9173829.html
Copyright © 2011-2022 走看看