jQuery Ajax提交表单-优快云博客

本文链接：https://blog.youkuaiyun.com/yibingde/article/details/38961569

<head runat="server">
    <title>无标题页</title>
<style type="text/css">
    div#wait{
        position:absolute;
        top:100px;
        left:200px;
    }
</style>
  <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
      $('#wait').css('display','none');
      $("#sub").click(function(){
          if($("#id").val()==""){
            alert("id不能为空");
            return;
          }
          if($("#name").val()==""){
            alert("name不能为空");
            return;
          }
            fn_ajax();
      });
function fn_ajax(){
        var id=$("#id").val();
        var name=$("#name").val();
        $.ajax({
            async:true,//是否是异步提交
            cache:true,//是否缓存
            global:true,//(默认: true) 是否触发全局 AJAX 事件
            type:'GET',
            url:'http://localhost:1937/WebSite2/Default.aspx?name='+name+'&id='+id,//(默认: 当前页地址) 发送请求的地址。
            beforeSend:function(){//提交之前准备处理事件
                $('#wait').css('display','block');
                $("#sub").attr("disabled","true");
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){//提交错误处理
                alert("提交错误！");
            },
            success:function(data){//提交成功处理事件
                $("#text").val(data);
            },
            complete:function(Xtr){//提交完成处理事件（最终处理不管是否成功）
                $('#wait').css('display','none');
                $("#sub").attr("disabled","");
            }
        });

    }
});
</script>
<script type="text/javascript">
   function submit(){
     $.ajax({
     type: "POST",
     url: "Default.aspx",
     data: "name=John&id=Boston",
     success: function(msg){
     alert( "Data Saved: " + msg );
   }
});
   }
</script>
</head>
<body style="text-align:center;">
<form id="form1" runat="server">

    <div id="wait">请等待....,加载数据!</div>
    <input type="text" id="id" /><br />
    <input type="text" id="name"/><br />
    <input type="text" id="text" /><br />
    <input type="button" id="sub" value="提交" />
</form>
</body>
</html>