zoukankan      html  css  js  c++  java
  • ajax遍历数组(实现百度搜索提示的效果)

    方法一:

    页面

    <input type="hidden" id="classpath" value="${pageContext.request.contextPath }"/>
             <div id="div">
                 <form id="userForm">
                    <span>搜索用户:<input type="text" id="text_input" name="userName" value=""/> 输入后自动搜索</span>
                </form>
                <div id="usersdiv">
                    <ul>
                    </ul>
                </div>
               </div>

    遍历数组

    //点击text事件
          $(function(){
              function text_input_sousuo(){
                  var classpath = $("#classpath").val();
                  var userName = $("#text_input").val();
                  var usersdiv = $("#usersdiv ul");
                  var text = "";
                  //ajax
                 $.ajax({
                    type:"Post",
                    data:{"userName":userName},//传入的参数
                    dataType:"json",//接收回来是数组
                    url:classpath+"/getUserByAllJson",
                     success:function(data){
                        $.each(data.users,function(i){
                            text+="<li>"+data.users[i].userName+"</li>";
                         });
                         usersdiv.html(text);
                         var usersli = $("#usersdiv ul li");
                            usersli.css({"float":"left","border":"1px solid #cccccc","height":"28px",
                                "width":"60px","margin":"10px","background-color":"#efefef","cursor":"pointer"
                            });
                        usersli.on("click",function(){
                            $("#text_input").val($(this).html());
                            usersdiv.empty();
                        });
                    }
                                 
                });
              };
              $("#text_input").on("keyup",function(){
                  text_input_sousuo();
              });
              $("#text_input").on("focus",function(){
                  text_input_sousuo();
             }); 

    strust文件

    <package name="users" extends="json-default" namespace="/">
            <action name="getUserByAllJson" method="getUserByAll" class="cn.bdqn.action.user.UserAction">
                <result type="json">
                    <param name="includeProperties">users.*</param>
                </result>
            </action>
        </package>

     方法二:用getJSON来做(思路)

    $("button").click(function(){
      $.getJSON("demo_ajax_json.js",function(result){
        $.each(result, function(i, field){
          $("div").append(field + " ");
        });
      });
    });
    <package name="users" extends="json-default" namespace="/">
            <action name="getUserByAllJson" method="getUserByAll" class="cn.bdqn.action.user.UserAction">
                <result type="json">
                    <param name="root">users</param>
                </result>
            </action>
        </package>
  • 相关阅读:
    Rsa加密类
    Des加密类
    AES对称加密解密类
    用字符串生成二维码
    ViedoUtil获取视频的缩略图
    UmUtils得到友盟的渠道号
    UiUtils
    StringUtils
    ShockUtil振动工具类
    SHA加密
  • 原文地址:https://www.cnblogs.com/xuerong/p/5044249.html
Copyright © 2011-2022 走看看