精华内容
下载资源
问答
  • x-requested-with: XMLHttpRequest
  • 流程: 1.点击加载btn发起异步请求post 2.后台处理请求返回数据 3.前端获取数据成功,对数据进行处理

    流程:

    1.点击加载btn发起异步请求post

    2.后台处理请求返回数据

    3.前端获取数据成功,对数据进行处理


    前端:

    html:首先要导入jq包,不然怎么用ajax呢。

    <script type="text/javascript" src="js/jquery.js"></script>

    <select name="warId" id="warId" style="height:100%;width:107px">
    	<option value="">所有仓库 </option>
    </select>

    <script type="text/javascript">
    $(document).ready(function(){    //这里实现的是: 点击class为add的按钮时加载仓库列表
    	$(".add").click(function(){
    			$.post("xxxx.do",function(data){      //要异步加载的action,和成功后的回调
    				var objs = data.warehouses;     //对应action里的属性
    				var selObj = $("#wareId");   
    				selObj.empty();
    				for (var i in objs) {
    					var obj = objs[i];
    					addOption(selObj,obj.id,obj.warehouseName); //为Select追加一个Option(下拉项)           
    				}
    			},"json");	 //返回类型
    	 }); 
    });
    function addOption(selObj,value,text){
    	var optionstring = "<option value=\"" + value + "\" >"+ text + "</option>";
    	selObj.append(optionstring); //为Select追加一个Option(下拉项)           
    }
    </script>

    后台structs:

    使用注解实现,

    要注意的是声明类的时候要加注解:@ParentPackage("json-default")

    方法声明注解: @Action(value = "xxxx", results = @Result(name = "success", type="json"))  

    需要跳转页面就把type = "json" 换成  location = "/mobile/auction_detailed.jsp" 要跳转的页面


    @ParentPackage("json-default")
    public class WarHouseAction extends ActionSupport {
    	@Autowired
    	private WarehouseService warehouseService;
    	
    	private List<Warehouse> warehouses;
    	
    	/**
    	 * 后台ajax
    	 * @return
    	 * 需要跳转页面就把type = "json" 换成  location = "/mobile/auction_detailed.jsp" 要跳转的页面
    	 */
    	@Action(value = "addGood_before", results = @Result(name = "success", type="json"))  
    	public String addGoodBefore(){
    		warehouses = warehouseService.findAllEnableWarehouses();   //这个是返回到页面的
    		return "success";
    	}
    
    	public WarehouseService getWarehouseService() {
    		return warehouseService;
    	}
    
    	public void setWarehouseService(WarehouseService warehouseService) {
    		this.warehouseService = warehouseService;
    	}
    
    	public List<Warehouse> getWarehouses() {
    		return warehouses;
    	}
    
    	public void setWarehouses(List<Warehouse> warehouses) {
    		this.warehouses = warehouses;
    	}
    }
    

    提示一下用的是jquery.js   v1.4.1的  ,用min的貌似是返回json的不是返回obj

    展开全文
  • 论#POST异步加载的tab切换内容 swiper切换不起效果以及底部pagination 失效的解决办法论#POST异步加载的tab切换内容 swiper切换不起效果以及底部pagination 失效的解决办法#function hdp_swiper(){ var swiper = ...

    论#POST异步加载的tab切换内容 swiper切换不起效果以及底部pagination 失效的解决办法

    论#POST异步加载的tab切换内容 swiper切换不起效果以及底部pagination 失效的解决办法#

    function hdp_swiper(){  
        var swiper = new Swiper('.hdp-container', {  
            pagination: '.swiper-pagination',  
            paginationClickable: true,  
            observer:true,//修改swiper自己或子元素时,自动初始化swiper  
            observeParents:true,//修改swiper的父元素时,自动初始化swiper  
            onSlideChangeEnd: function(swiper){  
                swiper.update();  
            }  
        });  
    
    }; 

    这2个参数:observer:true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents:true,//修改swiper的父元素时,自动初始化swiper
    就是在swiper滑动的时候滑动到第3屏就滑动不了的解决办法。原文参考:
    http://segmentfault.com/a/1190000002962202

    动态模板中 swiper 划不动问题

    是底部pagination 失效的解决办法:意思是在滑动结束的时候,再重新更新或者刷新下swiper。
    这2个bug整整花费了近乎半天的时间。
    除了解决标题的问题外,之前做弹窗还遇到过这种问题:(用的swiper3.0版本,后面会说到swiper2.0,因为3.0已经不兼容ie8了,而且本次操作的平台是pc,非移动端)
    弹窗内容有tab切换,有2个swiper分别在tab切换的内容下,当点击触发弹窗的按钮后,显示弹窗内容,但不管怎么tab切换,swiper的滑动事件都不起效果。
    一开始我的错误代码就是这样的:

    myswiper = new Swiper('.TabChangeIos', {  
        pagination: '.paginationios',  
        paginationClickable: true,  
        autoplay: 3000,  
        grabCursor: true,  
        loop : true,  
        speed : speed,  
    });  

    这种格式是构造函数调用swiper插件,传入.TabChangeIos 这个DOM对象,然后传入后面的参数,这个也是swiper的api最基本的形式。表面上是没什么问题,但引入第二个swip的时候,特别还是显示一个,要隐藏另外一个情况下就会出问题。另外一个错误代码如下:

    myswiper = new Swiper('.TabChangeAnd', {  
        pagination: '.paginationios',  
        paginationClickable: true,  
        autoplay: 3000,  
        grabCursor: true,  
        loop : true,  
        speed : speed,  
    });  

    只是传入的DOM对象不一样,其他都是一样的。
    正确的做法是:将调用构造函数的返回结果包成一个函数,在触发弹窗显示的时候(这里是点击事件),将函数调用1次就可以了。

    function andSwiper(){  
         swiper = new Swiper('.TabChangeAnd', {  
               pagination: '.paginationand',  
               paginationClickable: true,  
               autoplay: 3000,  
               grabCursor: true,  
               autoplayDisableOnInteraction : false,  
               loop : true,  
               speed : speed,  
               onSlideChangeEnd: function(swiper){  
                swiper.startAutoplay();      
             }  
           });  
        }  
       function iosSwiper(){  
          myswiper = new Swiper('.TabChangeIos', {  
             pagination: '.paginationios',  
             paginationClickable: true,  
             autoplay: 3000,  
             grabCursor: true,  
             autoplayDisableOnInteraction : false,  
             loop : true,  
             speed : speed,  
             onSlideChangeEnd: function(swiper){  
                 myswiper.startAutoplay();      
             }  
         });  
      }  
    
    $(".showBox").click(function(){  
                 iosSwiper();  
                 andSwiper();   
               }  
           })  

    这种方法适合于,tab切换,和异步post加载
    解决完这个bug后,后面还遇到不兼容ie8的问题,所以切换到了swiper2,调用方法都差不多。
    暂且先把这个问题的解决办法黏贴上来,因为是我们PHP同事解决的。

    function getBrowserInfo()  
        {  
        var agent = navigator.userAgent.toLowerCase() ;  
    
        var regStr_ie = /msie [\d.]+;/gi ;  
        var regStr_ff = /firefox\/[\d.]+/gi  
        var regStr_chrome = /chrome\/[\d.]+/gi ;  
        var regStr_saf = /safari\/[\d.]+/gi ;  
        //IE  
        if(agent.indexOf("msie") > 0)  
        {  
            return 'ie' ;  
        }  
    
        //firefox  
        if(agent.indexOf("firefox") > 0)  
        {  
        return agent.match(regStr_ff) ;  
        }  
    
        //Chrome  
        if(agent.indexOf("chrome") > 0)  
        {  
        return agent.match(regStr_chrome) ;  
        }  
    
        //Safari  
        if(agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0)  
        {  
        return agent.match(regStr_saf) ;  
        }  
    
        }  
        var is_ie = getBrowserInfo();  
        var speed = 800;  
        if(is_ie == 'ie'){  
            speed = 3600;  
           }  
    展开全文
  • volley 应用 GET POST请求 图片异步加载

    千次阅读 2014-10-07 16:29:49
     volley 应用 GET POST请求 图片异步加载
    

    Volley是Android平台上的网络通信库,能使网络通信更快,更简单,更健壮


    package com.example.volleydemo;
    
    import java.util.HashMap;
    import java.util.Map;
    
    import org.json.JSONObject;
    
    import android.app.Activity;
    import android.app.ProgressDialog;
    import android.graphics.Bitmap;
    import android.os.Bundle;
    import android.support.v4.util.LruCache;
    import android.util.Log;
    import android.widget.ImageView;
    
    import com.android.volley.Request;
    import com.android.volley.RequestQueue;
    import com.android.volley.Response;
    import com.android.volley.VolleyError;
    import com.android.volley.toolbox.ImageLoader;
    import com.android.volley.toolbox.ImageLoader.ImageCache;
    import com.android.volley.toolbox.ImageLoader.ImageListener;
    import com.android.volley.toolbox.JsonObjectRequest;
    import com.android.volley.toolbox.NetworkImageView;
    import com.android.volley.toolbox.StringRequest;
    import com.android.volley.toolbox.Volley;
    
    /**
     * Demo描述: 1 利用Volley获取JSON数据  2 利用Volley异步加载图片 1 利用NetworkImageView加载网路图片
     * 
     */
    public class MainActivity extends Activity {
        private ImageView mImageView;
        private NetworkImageView mNetworkImageView;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            init();
        }
    
        private void init() {
            mImageView = (ImageView) findViewById(R.id.imageView);
            mNetworkImageView = (NetworkImageView) findViewById(R.id.networkImageView);
            getJSONByVolley();
            getJsonPost();
            loadImageByVolley();
            showImageByNetworkImageView();
        }
    
        /**
         * 利用Volley获取JSON数据
         */
        private void getJSONByVolley() {
            RequestQueue requestQueue = Volley.newRequestQueue(this);
            String JSONDataUrl = "http://127.0.0.1:8099/api/api.ashx?action=product_list&ver=1&pageindex=1&pageCount=5";
            final ProgressDialog progressDialog = ProgressDialog.show(this,
                    "请稍后...", "正在加载...");
    
            JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(
                    Request.Method.GET, JSONDataUrl, null,
                    new Response.Listener<JSONObject>() {
                        @Override
                        public void onResponse(JSONObject response) {
                            //处理返回的JSON数据
                            Log.e("bbb", response.toString());
                            if(progressDialog.isShowing() && progressDialog!=null){ 
                              progressDialog.dismiss(); }
                        }
                    }, new Response.ErrorListener() {
                        @Override
                        public void onErrorResponse(VolleyError arg0) {
                            // System.out.println("sorry,Error");
                            Log.e("aaa", arg0.toString());
                        }
                    });
            requestQueue.add(jsonObjectRequest);
        }
    
        /***
         * 以POST形式加载数据
         */
        private void getJsonPost() {
            RequestQueue requestQueue = Volley.newRequestQueue(this);
            String url = "http://127.0.0.1:8099/api/api.ashx";
            StringRequest postRequest = new StringRequest(Request.Method.POST, url,
                    new Response.Listener<String>() {
                        @Override
                        public void onResponse(String response) {
                            //处理返回的JSON数据
                            Log.d("Response", response);
                        }
                    }, new Response.ErrorListener() {
                        @Override
                        public void onErrorResponse(VolleyError error) {
                            // error
                        }
                    }) {
                @Override
                protected Map<String, String> getParams() {
                    //POST 参数
                    Map<String, String> params = new HashMap<String, String>();
                    params.put("action", "product_list");
                    params.put("ver", "1");
                    params.put("pageindex", "1");
                    params.put("pageCount", "5");
                    return params;
                }
            };
            requestQueue.add(postRequest);
        }
    
        /**
         * 利用Volley异步加载图片
         * 
         * 注意方法参数: getImageListener(ImageView view, int defaultImageResId, int
         * errorImageResId) 第一个参数:显示图片的ImageView 第二个参数:默认显示的图片资源 第三个参数:加载错误时显示的图片资源
         */
        private void loadImageByVolley() {
            String imageUrl = "http://d.hiphotos.baidu.com/pic/w%3D310/sign=a00aca825aafa40f3cc6c8dc9b65038c/060828381f30e9246b63e1814c086e061c95f7bf.jpg";
            RequestQueue requestQueue = Volley.newRequestQueue(this);
            final LruCache<String, Bitmap> lruCache = new LruCache<String, Bitmap>(
                    20);
            ImageCache imageCache = new ImageCache() {
                @Override
                public void putBitmap(String key, Bitmap value) {
                    lruCache.put(key, value);
                }
    
                @Override
                public Bitmap getBitmap(String key) {
                    return lruCache.get(key);
                }
            };
            ImageLoader imageLoader = new ImageLoader(requestQueue, imageCache);
            ImageListener listener = ImageLoader.getImageListener(mImageView,
                    R.drawable.ic_launcher, R.drawable.ic_launcher);
            imageLoader.get(imageUrl, listener);
        }
    
        /**
         * 利用NetworkImageView显示网络图片
         */
        private void showImageByNetworkImageView() {
            String imageUrl = "http://d.hiphotos.baidu.com/pic/w%3D310/sign=a00aca825aafa40f3cc6c8dc9b65038c/060828381f30e9246b63e1814c086e061c95f7bf.jpg";
            RequestQueue requestQueue = Volley.newRequestQueue(this);
            final LruCache<String, Bitmap> lruCache = new LruCache<String, Bitmap>(
                    20);
            ImageCache imageCache = new ImageCache() {
                @Override
                public void putBitmap(String key, Bitmap value) {
                    lruCache.put(key, value);
                }
    
                @Override
                public Bitmap getBitmap(String key) {
                    return lruCache.get(key);
                }
            };
            ImageLoader imageLoader = new ImageLoader(requestQueue, imageCache);
            mNetworkImageView.setTag("url");
            mNetworkImageView.setImageUrl(imageUrl, imageLoader);
        }
    
    }


    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        xmlns:tools="http://schemas.android.com/tools"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
         >  
      
        <com.android.volley.toolbox.NetworkImageView  
            android:id="@+id/networkImageView"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
            android:layout_centerHorizontal="true"  
            android:layout_marginTop="30dip"  
        />  
          
         <ImageView  
            android:id="@+id/imageView"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
            android:layout_centerInParent="true"  
        />  
      
    </RelativeLayout>


    引入Volley非常简单,首先,从git库先克隆一个下来:

    git clone https://android.googlesource.com/platform/frameworks/volley 

    转自:http://www.cnblogs.com/freexiaoyu/p/3446028.html



    展开全文
  • Ajax异步加载web网页数据

    千次阅读 2016-12-26 17:53:21
    数据以json数组的形式交互(ajax异步通信) 后台代码 public void getCinemaInfobySelect() throws Exception{ System .out .println ( "打印js 界面传来的选择日期参数" +date_selected) ; //这里 的 6 ...

    html代码

       <select id="cinemaName" name="release.cinema.cinema_name"  class="select w50" style="width:250px;">  //javascript代码通过id名称写
                <option value="" selected="selected">请选择影院</option>
                <s:iterator  value="cinemas" id="m">
                    <option value="<s:property value="#m.cinema_name"/>" ><s:property value="#m.cinema_name"/></option>
                </s:iterator>
              </select>

    javascript代码

    <script type="text/javascript">
            $(document).ready(function(){ 
            $('#cinemaName').change(function(){ 
                    var val=$(this).children('option:selected').val();
                        val=$.trim(val);
                    var url="releaseAction_getCinemaInfo.action";
            alert($(this).children('option:selected').val()); 
            var p1=$(this).children('option:selected').val();//这就是selected的值 
            var args={"cinema.cinema_name":val,"time":new Date()};
    
            $.post(url,args,function(data){
                    //alert(data);
                $("#input1").val(data.cinema_id);
                $("#input2").val(data.cinema_address);
            },"json"); 
            })
    
                $('#movieName').change(function(){ 
                    var val=$(this).children('option:selected').val();//这就是selected的值 
                    var p1=$(this).children('option:selected').val();//这就是selected的值 
                        val=$.trim(val);
                    var url="releaseAction_getMovieInfo.action";
            alert($(this).children('option:selected').val()); 
    
            var args={"movie.movie_name":val,"time":new Date()};
            $.post(url,args,function(data){
                 var obj = eval(data);
        //      alert("主演是:"+data.movie_role);
                $("#input3").val(data.movie_id);
                $("#input4").val(data.movie_role);
                $("#input5").val(data.movie_director);
                $("#input6").val(data.movie_length);
            },"json"); 
            })
            })
            //window.location.href="xx.php?param1="+p1+"¶m2="+p2+"";//页面跳转并传参 
    
        </script>

    Action类代码

        public void  getCinemaInfo() throws Exception{
            jsonObject=new JSONObject();
    
            if (cinemaService.getCinemaByCinemaName(cinema).get(0)!=null) {
                  cinema = cinemaService.getCinemaByCinemaName(cinema).get(0);
                  HttpServletResponse response=ServletActionContext.getResponse();
                  response.setContentType("text/html;charset=utf-8");
                  PrintWriter out = response.getWriter();  
    
                  jsonObject.put("cinema_id", cinema.getCinema_id());
                  jsonObject.put("cinema_address", cinema.getCinema_address());
                  out.println(jsonObject);  
                  out.flush();  
                  out.close();  
            }
       }

    数据以json数组的形式交互(ajax异步通信)

    后台代码

       public void  getCinemaInfobySelect() throws Exception{
                System.out.println("打印js 界面传来的选择日期参数"+date_selected);
                //这里 的6是影院id,前面的页面提供,先写死 的
    
                if (releases.size()>0) {
                    jsonArray =JSONArray.fromObject(releases);
                    //打印订单信息
                    for(MovieRelease m:releases)
                    {
                        System.out.println(m);
                    }
                     HttpServletResponse response=ServletActionContext.getResponse();
                     response.setContentType("text/html;charset=utf-8");
                     PrintWriter out = response.getWriter();  
                     System.out.println("打印传给界面的值:"+jsonArray.toString());
                     System.out.println("打印传给界面的值:"+jsonArray);
                     out.println(jsonArray);  
                     out.flush();  
                     out.close();  
                }else {
                    System.out.println("该影片没有查询到排片信息!");
                }
           }

    js代码

        $('#date_select').change(function(){ 
            var val=$(this).children('option:selected').val();
                val=$.trim(val);
            var url="orderAction_getCinemaInfobySelect.action";
            alert($(this).children('option:selected').val()); 
            var p1=$(this).children('option:selected').val();//这就是selected的值 
            var args={"date_selected":val,"time":new Date()};
            $.post(url,args,function(data){
    //            alert(data);
                  $.each(data, function(index, val) {
                      alert("打印查出来的排片id"+val.release_id);
                      });
            },"json"); 
        })
    展开全文
  • VolleyDemo Volley图片异步加载。get,post获得网络数据 访问网络数据方便快捷
  • 异步加载与请求

    2021-01-17 12:07:16
    文章目录异步加载与请求:背景:异步加载JSON介绍与应用异步GET与POST请求 背景: 随着技术的不断进步,现在不少网站已经引入了异步加载技术,单击新的链接以后,几乎看不到“白屏”的现象了。而且更神奇的是,单击...
  • scrapy 爬虫框架中 ajax 异步加载 post请求方式的处理方法: 以福建省公共资源交易电子公共服务网站为例https://www.fjggfw.gov.cn/Website/JYXXNew.aspx,爬取招标结果,打开F12控制台界面如下图所示: Request ...
  • zTree 异步加载

    千次阅读 2013-06-18 16:30:11
    最近在写一个zTree 异步加载的小例子,纠结了两三天,终于给纠结出来了!现将经验及代码分享如下:  var curMenu = null, zTree_Menu = null; var setting = { async:{ autoParam:["menuid"],//异步...
  • angular js 中异步加载

    2017-07-18 14:42:25
    对于angular js中异步加载后台的时,要在访问主页面时让其执行异步加载的代码,如以下代码,异步加载后的数据要在子页面中使用,就要放在加载子页面之前执行该段代码  $http({ method: 'POST', url: '...
  • ajax异步加载使用post方法时一直输出相同结果,不能实现翻页
  • 一、zTree – jQuery 树插件 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。...采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、Safari...
  • ajax 异步加载加载动画

    千次阅读 2018-10-02 12:03:54
    1.当数据恢复后台代码处理量较大时,希望前台能够有个提示或者动画,让用户知道后台在运转,让用户体验好点 $.ajax({ url: '${ctx}/admin/course/... type: 'post', dataType: 'json', beforeSend: function...
  • 使用el-cascader当数据量过大时,推荐使用异步加载机制,异步加载的好处也不用多说,当异步加载时,可能相同操作会重复从后台读取资源,占用资源不说,也对不起异步的初衷,其实很简单,判断绑定options是否加载过...
  • python爬虫之异步加载

    2020-12-11 00:54:08
    异步加载一.AJAX技术介绍二.JSON介绍三.异步GET与POST请求 一.AJAX技术介绍 AJAX是Asynchronous JavaScript And XML的首字母缩写,意为异步JavaScript与XML。 使用AJAX技术,可以在不刷新网页的情况下更新网页数据...
  • ajax异步加载问题

    千次阅读 2015-09-28 16:01:09
    ajax异步加载
  • 对于有的网页,我们滑动滚轮或者点击下一页,我们...但要注意网页的请求方式是GET还是POST。 下面以今日头条图片网页和美团外卖评论网页作为对比进行分析。 注意: 所有的url都是XHR下的链接,去掉多余的参数。 ...
  • jQuery:$post、$get、$ajax与php,实现异步加载 什么是异步加载? 整个最通俗的说法就是将另外一个页面上的数据通过append() 或者 html()等函数插入到本页上。纯js写法responseXML 或 responseText插入到页面中...
  • Ajax 异步加载

    千次阅读 2016-08-07 10:47:30
    它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的艺术。 那么,让我们一起走进AJax的世界吧。基础语法学习Ajax之前,我们要明确自己的需求,那...
  • BUG描述 ...解决方案一:异步加载的过程中将提交按钮设为不可用。 二,新增和删除分为两个list,后台只做新增和删除,其余数据不动, 三,给弹框提示用户删除那些角色下的用户 四,post请求改为同...
  • ztree + 异步加载

    千次阅读 2018-08-14 15:14:56
    ztree 的异步加载:就是一级一级的从下加载数据,从点击省加载到市,点击某个市加载县..... XML <select id="findProvinceList" resultType="com.zhiguangyun.modules.datavalid.entity.Region"> SELECT ...
  • python ztree 异步加载

    2017-10-25 17:01:20
    使用 python 服务端实现 ztree插件的异步加载 。开发时耗费了不少时间,所以记录下来~

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 91,585
精华内容 36,634
关键字:

post异步加载网页