提交使用jQuery AJAX的HTML表单

本文介绍了提交使用jQuery AJAX的HTML表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试着去用这个例子中使用AJAX提交HTML： http://jquery.malsup.com/form/

 ＆LT;形式ID =formoid行动=studentFormInsert.php标题=的方法=邮报＆GT;
＆LT; DIV＆GT;＆LT;标签类=头衔＆gt;首先姓名和LT; /标签＆gt;＆LT;输入类型=文本ID =名的名称=名称＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT;标签类=头衔 -  GT;名称＆LT; /标签＆gt;＆LT;输入类型=文本ID =名2NAME =名2＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT;输入类型=提交ID =提交按钮名称=提交按钮值=提交＆GT;＆LT; / DIV＆GT;

我的脚本：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（'＃formoid）。当作ajaxForm（函数（）{
            警报（感谢您发表评论！）;
        }）;
    }）;
＆LT; / SCRIPT＆GT;

这是不工作，我没有收到甚至警告消息当我提出我不想调用另一个网页，我只是想显示警告信息。

有没有做这件事的一个简单的方法？

PS。我有几个字段，只是把2为例

解决方案

我的code专门为你（在code注释说明）：

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
  ＆所述;脚本的src =的http：//$c$c.jquery.com/jquery-1.9.1.js＆GT;＆所述; /脚本＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT;形式ID =formoid行动=studentFormInsert.php标题=的方法=邮报＆GT;
        ＆LT; DIV＆GT;
            ＆LT;标签类=头衔＆gt;首先姓名和LT; /标签＆gt;
            ＆LT;输入类型=文本ID =名的名称=名称＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV＆GT;
            ＆LT;标签类=头衔 -  GT;名称＆LT; /标签＆gt;
            ＆LT;输入类型=文本ID =名2NAME =名2＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV＆GT;
            ＆LT;输入类型=提交ID =提交按钮名称=提交按钮值=提交＆GT;
        ＆LT; / DIV＆GT;
 ＆LT; /形式GT;
＆LT;脚本类型=文/ JavaScript的'＆GT;
    / *附上提交处理程序的形式* /
    $（＃formoid）。递交（函数（事件）{

      / *无法正常提交停止形式* /
      。事件preventDefault（）;

      / *从页面上的元素得到一些值：* /
      变量$形式= $（本），
          URL = $ form.attr（行动）;

      / *使用*后的数据发送/
      VAR发布= $。员额（URL，{名称：$（'＃姓名）VAL（），名称2：$（'＃名2）VAL（）}）;

      / *警报的结果* /
      posting.done（功能（数据）{
        警报（成功）;
      }）;
    }）;
＆LT; / SCRIPT＆GT;

＆LT; /身体GT;
＆LT; / HTML＆GT;

文档

从jQuery的网站 $。交文档。

示例：使用Ajax请求发送表单数据的

  $岗位（test.php的，$（＃TESTFORM）序列化（））;

示例：用ajax，并把结果张贴形式的DIV 的

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
    ＆LT; HEAD＆GT;
        ＆所述;脚本的src =的http：//$c$c.jquery.com/jquery-1.9.1.js＆GT;＆所述; /脚本＆GT;
    ＆LT; /头＆GT;
    ＆LT;身体GT;
        ＆LT;形式的行动=/ID =searchForm＆GT;
            ＆LT;输入类型=文本名称=S占位符=搜索.../＆GT;
            ＆LT;输入类型=提交值=搜索/＆GT;
        ＆LT; /形式GT;
        ＆LT;！ - 搜索的结果将呈现内该div  - ＆GT;
        ＆LT; DIV ID =结果＆GT;＆LT; / DIV＆GT;
        ＆LT;脚本＆GT;
            / *附上提交处理程序的形式* /
            $（＃searchForm）。递交（函数（事件）{

                / *无法正常提交停止形式* /
                。事件preventDefault（）;

                / *从页面上的元素得到一些值：* /
                变量$形式= $（本），
                    长期= $ form.find（'输入[名称=S]）。VAL（）
                    URL = $ form.attr（行动）;

                / *使用*后的数据发送/
                VAR发布= $。员额（URL，{
                    S：长期
                }）;

                / *把结果放到一个div * /
                posting.done（功能（数据）{
                    VAR含量= $（数据）.find（'＃内容）;
                    。$（＃结果），空（）追加（内容）;
                }）;
            }）;
        ＆LT; / SCRIPT＆GT;
    ＆LT; /身体GT;
＆LT; / HTML＆GT;

重要提示

在不使用OAuth，请不要使用此方法安全数据（信用卡号码，SSN，任何东西是PCI，HIPAA，或登录相关）

Im trying to submit a HTML from using AJAX by using this example: http://jquery.malsup.com/form/

My html code:

<form id="formoid" action="studentFormInsert.php" title="" method="post">
<div><label class="title">First Name</label><input type="text" id="name" name="name" ></div>
<div><label class="title">Name</label><input type="text" id="name2" name="name2" ></div>
<div><input type="submit" id="submitButton"  name="submitButton" value="Submit"></div>

my script:

<script type="text/javascript">
    $(document).ready(function() {
        $('#formoid').ajaxForm(function() {
            alert("Thank you for your comment!");
        });
    });
</script>

this is not working, I'm not getting even the alert messageand when I submit i dont want to call another page, I just want to show alert message.

Is there a simple way of doing it?

ps. i have several fields, just put 2 as an example

解决方案

My code specifically for you (described in code comments):

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <form id="formoid" action="studentFormInsert.php" title="" method="post">
        <div>
            <label class="title">First Name</label>
            <input type="text" id="name" name="name" >
        </div>
        <div>
            <label class="title">Name</label>
            <input type="text" id="name2" name="name2" >
        </div>
        <div>
            <input type="submit" id="submitButton"  name="submitButton" value="Submit">
        </div>
 </form>
<script type='text/javascript'>
    /* attach a submit handler to the form */
    $("#formoid").submit(function(event) {

      /* stop form from submitting normally */
      event.preventDefault();

      /* get some values from elements on the page: */
      var $form = $( this ),
          url = $form.attr( 'action' );

      /* Send the data using post */
      var posting = $.post( url, { name: $('#name').val(), name2: $('#name2').val() } );

      /* Alerts the results */
      posting.done(function( data ) {
        alert('success');
      });
    });
</script>

</body>
</html>

Documentation

From jQuery website $.post documentation.

Example: Send form data using ajax requests

$.post("test.php", $("#testform").serialize());

Example: Post a form using ajax and put results in a div

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form action="/" id="searchForm">
            <input type="text" name="s" placeholder="Search..." />
            <input type="submit" value="Search" />
        </form>
        <!-- the result of the search will be rendered inside this div -->
        <div id="result"></div>
        <script>
            /* attach a submit handler to the form */
            $("#searchForm").submit(function(event) {

                /* stop form from submitting normally */
                event.preventDefault();

                /* get some values from elements on the page: */
                var $form = $(this),
                    term = $form.find('input[name="s"]').val(),
                    url = $form.attr('action');

                /* Send the data using post */
                var posting = $.post(url, {
                    s: term
                });

                /* Put the results in a div */
                posting.done(function(data) {
                    var content = $(data).find('#content');
                    $("#result").empty().append(content);
                });
            });
        </script>
    </body>
</html>

Important Note

Without using OAuth please don't use this method for secure data (credit card numbers, SSN, anything that is PCI, HIPAA, or login related)

这篇关于提交使用jQuery AJAX的HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！