jQuery Ajax提交表单

最新推荐文章于 2022-11-04 14:57:24 发布

吴丘

最新推荐文章于 2022-11-04 14:57:24 发布

阅读量478

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/yibingde/article/details/38961569

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<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>

吴丘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery Ajax提交表单

无标题页 div#wait{ position:absolute; top:100px; left:200px; } $(document).ready(function(){ $('#wait').css('di
复制链接

扫一扫

专栏目录