使用AJAX提交Form表单的方法

最新推荐文章于 2023-06-14 15:40:29 发布

转型之路

最新推荐文章于 2023-06-14 15:40:29 发布

阅读量793

点赞数

分类专栏： 5. JQuery

5. JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用AJAX提交Form表单的方法，其中主要的就是ajaxForm()和ajaxSubmit()，ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象，它包含了如下一些属性与值的集合：

Options对象的详解：

1.)target
指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。
默认值：null。

2.)url
重写或者指定表单的'action'属性。
默认值：表单的action属性值

3.)type
重写或者指定表单的'method' 属性,"GET"或"POST"。
默认值：表单的method属性值（如果没有找到默认为“GET”）。

4.)beforeSubmit
表单提交前被调用的回调函数，该方法通常被提供来运行预提交逻辑或者校验表单数据。如果"beforeSubmit"回调函数返回false，那么表单将不被提交。"beforeSubmit"回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入 ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据：
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
默认值：null

5.)success
表单成功提交后调用的回调函数。如果提供"success"回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值：null

6.)dataType
期望服务器的的回应的类型。null、"xml"、"script"或者"json"其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持：
'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定，将传回responseXML值
'json'：如果dataType == 'json'，服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。
'script'：如果dataType == 'script'，服务器响应将求值成纯文本。
默认值：null（服务器返回responseText值）

7.)semantic
布尔标志，表示数据是否必须严格按照语义顺序来进行提交。注意：一般来说，表单已经按照语义顺序来进行了串行化（或序列化），除了 type="image"的input元素。如果你的服务器有严格的语义要求，以及表单中包含有一个type="image"的input元素，就应该将 semantic设置为true。
默认值：false

8.)resetForm
布尔标志，表示如果表单提交成功是否进行重置。
默认值：null

9.)clearForm
布尔标志，表示如果表单提交成功是否清除表单数据。
默认值：null

10.)在$.ajax options中用到的元素都可以用在这里:

如：timeout:3000

11.)AjaxForm和AjaxSubmit区别
ajaxForm:不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit:马上由AJAX来提交表单。你可以在任何情况下进行该项提交。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>ajaxForm Laboratory</title>
    <link rel="stylesheet" type="text/css" href="../../common.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript"
            src="../../scripts/jquery-1.2.1.js"></script>
    <script type="text/javascript"
            src="../../scripts/support.labs.js"></script>
    <script type="text/javascript" src="../../scripts/jquery.form.js"></script>
    <script type="text/javascript">
    	//1.window.onload()相似 $(function())
    	//  $(function() { } )是在dom结构创建完成以后就执行，
      //  window.onload是在整个页面加载完成之后（包括页面上的资源，比如图片）才执行
      $(function(){
      	//2. AJAX提交Form表单的方法:ajaxForm()和ajaxSubmit()
        //   包含相关参数由一个Javascript的Options对象来提供，包含了如下一些属性与值的集合
        var options = {
        	//2.表单提交后，服务器响应显示区域
          target: '#responseDisplay',
          //提交之前调用回调函数
          beforeSubmit: function(data,set,options) {
          	//感觉是生成Json的函数，给ID为dataDisplay的DOM标签赋值
            $('#dataDisplay').html($.toSource(data));
            var disposition = $('#dispositionGroup input:radio').fieldValue()[0];
            if (disposition != '') options[disposition] = true;
            var optionsClone = $.extend({},options);
            optionsClone.beforeSubmit = undefined;
            //感觉是生成Json的函数，给ID为optionsDisplay的DOM标签赋值
            $('#optionsDisplay').html($.toSource($.extend({},optionsClone),true));
            return true;
          }
        };
        //表单提交后，服务器响应更新至testForm处
        $('#testForm').ajaxForm(options);
        //图像相关是否表单数据串行序列化
        $('#testForm').bind('form.pre.serialize',function(type,$form,options,veto) {
        	alert("可以在这里对提交表单的字段的内容进行一些处理，例如把passwd进行加密"); 
          if ($('#semanticControl').fieldValue().length != 0) options.semantic = true;
        });
      });
    </script>
    <style>
      #console div {
        overflow: inherit;
      }
      #console div div {
        width: 540px;
        overflow: auto;
      }
    </style>
  </head>

  <body>
    <h1>ajaxForm Laboratory</h1>
    <fieldset>
      <legend>The form</legend>
      <div>
        <form id="testForm" action="reflectData.jsp" method="post">
          <div>
            <label>Text field:</label>
            <input type="text" name="text" value="some text"/>
          </div>

          <div>
            <label>Dropdown:</label>
            <select name="dropdown">
              <option value="dropdown 1">One</option>
              <option value="dropdown 2">Two</option>
              <option value="dropdown 3" selected="selected">Three</option>
              <option value="dropdown 4">Four</option>
              <option value="dropdown 5">Five</option>
            </select>
          </div>

          <div>
            <label>Input image:</label>
            <input type="image" name="inputImage" src="image.1.jpg" value="hibiscus blossom"/>
          </div>

          <div>
            <label>Check box group:</label>
            <input type="checkbox" name="cb" value="checkbox 1">One
            <input type="checkbox" name="cb" value="checkbox 2" checked="checked">Two
            <input type="checkbox" name="cb" value="checkbox 3">Three
          </div>

          <div>
            <label>Radio group:</label>
            <input type="radio" name="radio" value="radio 1">One
            <input type="radio" name="radio" value="radio 2" checked="checked">Two
            <input type="radio" name="radio" value="radio 3">Three
          </div>

          <div>
            <label>Text area:</label>
            <textarea name="textarea" rows="2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</textarea>
          </div>

          <div>
            <label> </label>
            <input type="submit" name="submitButton" value="Submit me!"/>
          </div>

        </form>
      </div>
    </fieldset>

    <fieldset>
      <legend>Control Panel</legend>
      <div>
        <form action="" οnsubmit="return false;">

          <div>
            <label>Semantic order:</label>
            <input type="checkbox" name="semantic" id="semanticControl"/> Check for yes
          </div>

          <div id="dispositionGroup">
            <label>After submission:</label>
            <input type="radio" name="disposition" value="1" checked="checked"/> Leave form be
            <input type="radio" name="disposition" value="resetForm"/> Reset form
            <input type="radio" name="disposition" value="clearForm"/> Clear form
          </div>
        </form>
      </div>
    </fieldset>

    <fieldset>
      <legend>Results</legend>
      <div id="console">
        <div>
          <label>Submitted data:</label>
          <div id="dataDisplay"></div>
        </div>
        <div>
          <label>Options:</label>
          <div id="optionsDisplay"></div>
        </div>
        <div>
          <label>Response:</label>
          <div id="responseDisplay"></div>
        </div>
      </div>
    </fieldset>
  </body>
</html>

转型之路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用AJAX提交Form表单的方法

使用AJAX提交Form表单的方法，其中主要的就是ajaxForm()和ajaxSubmit()，ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象，它包含了如下一些属性与值的集合：Options对象的详解：1.)target指明页面中由服务器响应进行更新的元素。元
复制链接

扫一扫