AJAX的学习随记

  1.什么是Ajax？

       所谓的ajax就是指可以在不重新加载页面的情况下，实现页面局部数据刷新的一种开发技术。

2. 加载数据方法load()

    语法：$(selector).load(URL,data,callback);

 其中：URL参数规定加载的路径，为必需参数。参数data是和请求一起发送的查询字符串键/值对集合。callback参数是load()方法完成后执行的函数。

 

3. 加载json格式的数据 getJSON()

    语法:  $.getJSON(url,[data],[callback])

              其中:url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后执行的函数。

     用法：

 $("#btn").click(function(){//按钮单击事件
      $.getJSON("/dd/data/getJSON.json",function(data){
	var str = "";//初始化保存内容变量
	//遍历获取的数据
	$.each(data,function(InfoIndex,info){
	str += "姓名：" + info["name"] + "<br /><hr>";
	str += "格言：" + info["desc"] + "<br /><hr>";
	})
	$("#div1").html(str);//显示处理后的数据
      })
    })

 4. 从服务器获取数据

        （1）用get方式获取

              $.get(url,callback);  其中url是请求路径，callback是数据请求成功后要执行的方法

                 用法：

       $("#btn").click(function(){//单击事件
	    //打开已获取返回数据的文件
	      $.get("dd/data/get.asp",function(data,status){
	      alert("数据：" + data + "\n状态：" + status);
	     });
           })

         ( 2 ) 用Post方式获取

    $post(url ，data ,callback); 

         用法：

 $("#btn").click(function(){//单击事件
        //打开已获取返回数据的文件
        $.post("dd/test/ajax/post",
        {
    	    name:"xiaoming",
	    city:"china"
        },
        function(data,status){
	    alert("数据：" + data + "\n状态：" + status);
        });
    })

   5.  加载服务器数据

     

语法：$.ajax([settings])

其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。

用法：

function onFileUploadimg(bt, columnname,type) {
		var url = "${ctx}/botPageManage/uploadimg.action?printable=true&imgType="+type;
		$.ajaxFileUpload({
			url : url,
			secureuri : false,
			fileElementId : bt.id,
			dataType : 'json',
			data : {},
			success : function(result, status) {


				if (result.id == '0') {
					alert("<hka:m code="图片格式不正确，请确认！"/>");
					return false;
				} else if(result.id == '2'){
					alert(result.path);
					return false;
				}
				else{
					alert("<hka:m code="上传成功"/>");
				}


				$.unblockUI();
				uploadCallback(result, columnname,type);


			},
			error : function(result, status, e) {
				alert(e);
			}
		});
		$.unblockUI();
		return false;


	}

一段图片上传的代码

九层之台，始于累土

用心      点滴      积累