jQuery ajaxForm()的应用

jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程。本文就是介绍了ajaxForm()的应用.

一、ajaxForm() 介绍

ajaxForm预处理将要使用 AJAX 方式提交的表单，将所有需要用到的事件监听器添加到其中。它不是提交这个表单。在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。

ajaxForm 需要零个或一个参数。这唯一的一个参数可以是一个回调函数或者是一个可选参数对象。

是否可以连环调用: 是。

二、引入依赖的js

rush:js;">

三、编写页面

rush:js;">

名称：
地址：
自我介绍：

<br/>
    <input type="submit" id="test" value="提交" /> <br/>
    <div id="output1" style="<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play:none;"></div>
  </form></pre>
</div>
<p><h3>四、<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>ajaxForm() <a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a></h3>
</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
 <script type="text/javascript">     
  $(document).ready(function() { 
      $('#myForm').ajaxForm(function() {  
        $('#output1').html("提交成功！欢迎下次再来！").show();  
      });  
  });  
  </script> 
</pre>
</div>
<p><h3>五、详细<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>如下：
</h3></p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>jQuery Form<a href="https://www.jb51.cc/tag/chajian/" target="_blank" class="keywords">插件</a>例子-ajaxForm()</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script src="jquery-1.3.1.js" type="text/javascript"></script>
 <script src="jquery.form.js" type="text/javascript"></script>
  <script type="text/javascript">     
  $(document).ready(function() { 
      $('#myForm').ajaxForm(function() {  
        $('#output1').html("提交成功！欢迎下次再来！").show();  
      });  
  });  
  </script> 
 </head>
<body>
  <h3> Demo 1 : form<a href="https://www.jb51.cc/tag/chajian/" target="_blank" class="keywords">插件</a>的使用--ajaxForm(). </h3>
  <form id="myForm" action="demo.jsp" method="post"> 
    <a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>： <input type="text" name="name" /> <br/>
    地址： <input type="text" name="address" /><br/> 
    自我介绍： <textarea name="comment">

display:none;">

六、编写接收表单的测试代码。demo.jsp

rush:js;"> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% request.setCharacterEncoding("UTF-8");//防止乱码! String name = request.getParameter("name"); String address = request.getParameter("address"); String comment = request.getParameter("comment"); System.out.println(name + " " +address + " " +comment); %>

七、效果如下：

以上所述是小编给大家介绍的ajaxForm()的应用。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文地址：https://www.jb51.cc/ajax/45157.html

jQuery ajaxForm()的应用

一、ajaxForm() 介绍

二、引入依赖的js

三、编写页面

六、编写接收表单的测试代码。demo.jsp

相关推荐