寻找薛定谔的猫

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
统计
 

     参考 http://www.cnblogs.com/popzhou/p/4338040.html

  • 依赖的脚本文件
    1 <script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script>
    2 <script src="../Javascript/jquery.form.js" type="text/javascript"></script>
  • AjaxSubmit 和AjaxForm区别
    ajaxForm 
    ajaxForm()不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始 
    ajaxForm()适用于以表单提交方式处理ajax技术(需要提供表单的action、id、 method,最好在表单中提供submit按钮)它大大简化了使用ajax技术提交表单时的数据传递问题,使用ajaxForm()你不需要逐个的以 JavaScript的方式获取每个表单属性的值,并且也不需要在请求路径后面通过url重写的方式传递数据。ajaxForm()会自动收集当前表单中每个属性的值,然后将其以表单提交的方式提交到目标url。这种方式提交数据较安全,并且使用起来更简单,不必写过多冗余的JavaScript代码
     
    ajaxSubmit 
    ajaxSubmit()马上由AJAX来提交表单。你可以在任何情况下进行该项提交。 

    ajaxSubmit()适用于以事件的机制以ajax提交form表单(超链接、图片的click事件),该方法作用与ajaxForm()类似,但它更为灵活,因为他依赖于事件机制,只要有事件存在就能使用该方法。你只需指定该form的action属性即可,不需要提供submit按钮。

  • 示例代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <!--HTML-->
    <form id="form1" name="form1">
       <input id="userName" name="userName" value="姓名" />
        <input id="age" name="age" value="30" />
         <input type="submit" value="submit" />
        </form>
       <input id="myButton" type="button" value="提交" />
      <!--javascript-->
       <script type="text/javascript">
     
            var myData = {
              "CnName": "周佳良",
              "EnName":"zhoujl"
            };
          $(function () {
              var ajaxFormOption = {
                   type: "post"//提交方式 
                   dataType: "json", //数据类型 
                   data: myData,//自定义数据参数,视情况添加
                   url: "TestHandler.ashx?type=ajaxForm", //请求url 
                   success: function (data) { //提交成功的回调函数 
                      document.write("success");
                   }
               };
     
               //form中有submit按钮——方式1
               $("#form1").ajaxForm(ajaxFormOption);
     
               //form中有submit按钮——方式2
               $("#form1").submit(function () {
                   $(this).ajaxSubmit(ajaxFormOption);
                     return false;
               });
     
              //不需要submit按钮,可以是任何元素的click事件
               $("#myButton").click(function () {
                    $("#form1").ajaxSubmit(ajaxFormOption);
                      return false;
               });
     
           });
       </script>

      

posted on   teagueli  阅读(3915)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
 
点击右上角即可分享
微信分享提示