jquery ajax请求的用法($.ajax, $.getJSON)

举例说明：

引入jquery包：

<script src="http://pic.lietou.com/js/web2.0/jquery-1.4.2.min.js" type="text/javascript"></script>

1.$.ajax的用法

demo说明：点保存按钮，异步保存数据，如果保存数据成功返回状态为“1”，保存数据成功，通过span标签控制“保存”按钮，提示绿色文字“保存成功”3秒钟后显示“保存”按钮；否则保存数据返回状态为“0”，保存数据异常失败，通过span标签控制“保存”按钮，提示红色文字“系统错误!请稍候再试！”3秒钟后显示“保存”按钮

json数据产生

response.setCharacterEncoding("utf-8");
response.getWriter().print(util.toString());

保存按钮触发

<form id="uploadForm" name="uploadForm" method="post" action="" enctype="multipart/form-data">

<span id="saveUserEStyle">

                <button class="buttonBlue" type="submit">
                    <span ><em>保存</em>
                    </span>
                </button>
            </span>

</form>

<script type="text/javascript">

$("uploadForm").submit( function () {
  DoSave();
} );

function DoSave(){
      var data = {};
      var uep_id = uep_desc = [];
      var formdata = $("#uploadForm").formToArray();
      $.ajax({
        type: "POST",
        url: "/enterprisehome/saveenterpriseproduct.do",
        data: formdata,
        dataType : 'json',
        success: function(data){
            if (data.state == '1') {
                document.getElementById("saveUserEStyle").innerHTML = "<span style='color: green;'>保存成功！</span>";
                setTimeout('saveUserEStyleSuccess();', 3000);
            } else {
                document.getElementById("saveUserEStyle").innerHTML = "<span style='color: red;'>系统错误!请稍候再试！</span>";
                setTimeout('saveUserEStyleError();', 3000);
            }
        }
      });
    }

function saveUserEStyleSuccess()
    {
        document.getElementById("saveUserEStyle").innerHTML='<button class="buttonBlue" type="submit"><span ><em>保存</em></span></button>';
    }
    function saveUserEStyleError()
    {
        document.getElementById("saveUserEStyle").innerHTML='<button class="buttonBlue" type="submit"><span ><em>保存</em></span></button>';
    }

</script>

2. $.getJSON用法

产生json数据：

response.setCharacterEncoding("utf-8");
response.getWriter().print(util.toString());

js请求js数据

<script type="text/javascript">

var timenow = new Date().getTime();
        $.getJSON("/enterprisehome/getenterpriseproduct.do?timenow=" + timenow, function(data){

if(data.e_product_lists != null){
                corpList = data.e_product_lists;
                if(corpList.length > 0){
                    var itemhtml = "";
                    for(var i in corpList){
                      itemhtml += '<ul class="clearfix" id="'+ corpList[i].uep_id + '">'+
                        '<li class="thumb">'+
                        '  <p><img id="photo_'+ corpList[i].uep_id + '" src="'+ corpList[i].uep_photo + '" width="180" height="120" /></p>'+
                        '  <p><a href="###" class="edite">编辑图片</a> <a href="###" class="delete">删除图片</a></p>'+
                        '</li>'+
                        '<li class="intro intro_vali"><input type="hidden" name="uep_id" value="'+ corpList[i].uep_id + '" /><textarea name="uep_desc" default="添加描述文字，4-100个汉字；" valitext="notEmpty=请填写描述文字&between4_100=照片描述有误，请填写4-100个汉字">'+ corpList[i].uep_desc + '</textarea></li>'+
                        '<li class="order">'+
                        '  <a href="###" class="movePrev">上移</a>'+
                        '  <a href="###" class="moveNext">下移</a>'+
                        '</li>'+
                        '</ul>';
                    }
             }
}

}

</script>