首页 » 网络技术 » 正文

详解如何使用jQuery的submit()方法提交表单

2022-11-09 网络技术 2483 views

这次，我们来学习一下“submit()”方法，它可以让你从jQuery中操作Form元素的提交！

什么是submit()

那么我们先从“submit()”方法的基础知识说起吧！

“submit()”是一种允许您在 jQuery 端对表单提交过程进行编程的方法。

例如，看一下我在下面准备的简单表单元素。

<form>
    <input type="text">
 
    <input type="submit" value="提交">
</form>

请注意，Form元素内有一个带有“submit”类型的输入标签的按钮。

这时候如果使用“submit()”方法，就可以描述当用户点击提交按钮时会执行的处理。例如，可以在将表单的内容发送到服务器之前执行诸如检查输入是否正确的处理。

使用submit()

从这里开始，让我们学习使用 subtmi() 方法的实际编程技术！

如何编写submit()

首先，我们来看看submit()的基本语法！

$(Form element).submit(process to be executed)

例如：

<body>
<form>
    <input type="text">
    <input type="submit" value="提交">
</form>
 
<script>
    $('form').submit( 要执行的操作 );
</script>
</body>

在此示例中，放置了一个简单的 Form 元素，并通过编写“$('form')”将目标元素指定为 Form。

可以看到 submit() 是针对这个 Form 执行的。

之后在 submit() 的参数中描述要执行的过程，一般来说是设置一个函数。

如何在函数中设置事件处理

让我们将要执行的函数设置为 submit() 的参数！

最简单的方法是将函数指定为参数，因为它是“匿名函数”。

示例：

$('form').submit(function() {
 
    alert('已提交!');
 
});

在此示例中， submit()使用设置为 Form 元素的参数的函数执行。

在这种情况下，当用户单击表单的“提交按钮”时，将显示alert弹窗。

此外，可以像普通函数一样执行在别处创建的函数，而不是匿名函数。

$('form').submit( sample );
 
function sample() {
 
    alert('已提交！');
 
}

在此示例中，您可以看到函数名称“sample()”被指定为 submit() 的参数。

如果函数内部的处理变得复杂，最好把函数写在别处，让代码更具可读性。

详解如何使用jQuery的submit()方法提交表单

更改表单操作

当 Form 元素执行提交时，它与指定的链接地址进行通信，但您可以从 jQuery 更改此链接。

submit()时如何更改

首先，我们来看一个简单的在submit()时改变链接的方法！

方法很简单，只需从jQuery中更改Form标签的action属性中描述的链接即可。

请参阅下面的示例！

$('form').submit(function() {
 
    $(this).attr('action', '/sample.html');
 
});

在这个例子中，你可以看到“attr()”方法用于在 submit() 执行时改变 action 属性值。

如果您将要发送的服务器的路径写入 attr() 的第二个参数，则表单的链接将被更改。

即使预先设置了 Form 标签的 action 属性，执行 submit() 时也会更改。

更改每个按钮(action)提交链接的方法

现在，让我们假设一个带有多个按钮的 Form 元素，并学习如何更改每个按钮的提交链接！

为了实现这一点，我们需要设计一种方法来告诉函数在每次单击按钮时发送到不同的链接。

所以让我们创建一个这样的函数：

function setAction(url) {
    $('form').attr('action', url);
 
    $('form').submit();
}

此函数获取“url”作为参数并将该 URL 设置为 attr() 方法的第二个参数。

因此，每次执行submit()时，只需告诉函数要发送到，就可以实现不同的通信。

之后，您可以如下设置Form元素上的按钮！

<form>
  <input type="button" value="提交1" onclick="setAction('/sample.html')">
  <input type="button" value="提交2" onclick="setAction('/index.html')">
</form>

通过在onclick属性中指定函数并将目的地链接设置为参数，您可以为每个按钮指定不同的操作属性值。

需要注意的是，将type属性值设置为“button”而不是“submit”!

如果写成“submit”的话可能会被重复发送，所以不要忘记写成“button”!

取消submit()

不仅要学习如何执行submit()，还要学习如何取消提交处理!

根据这个，例如确认表单的内容，如果错误的话可以取消发送处理。

如何取消submit()

首先，让我们看看如何取消（无效）submit()的执行！

至于如何取消，submit()方法其实有一个特性，如果返回值指定为“false”则停止执行。

使用它通常会导致类似的结果：

$('form').submit(function() {
 
    return false;
  
});

你需要做的很简单，在“return 语句”中返回 false 即可。

根据这个，submit()方法中止执行，结果是发送处理被取消。

submit()之前如何做一些处理

现在您已经了解了如何取消提交过程，让我们编写一个在执行 submit() 之前检查表单内容的过程！

例如，如果用户在输入表单中没有输入任何内容，请尝试取消提交过程并阻止其执行。

请参阅下面的示例！

$('form').submit(function(e) {
 
    var count = $('input').val().length;
 
    if( !count ) return false;
 
});

在此示例中，输入表单中的字符数使用“val().length”检查。

换句话说，如果字符数为“0”，则表示没有输入任何内容。因此，如果没有输入，则使用 IF 语句返回 false。

使用不带参数的submit()

到现在为止，在submit()方法的自变量中指定了想要执行的处理的函数。

但是，即使不指定这个自变量，也可以使用submit()。

在“无参数”的情况下，submit()处理可以用其他的HTML元素来代替。

请看下面的样本案例!

$('button').click(function() {
 
    $('form').submit();
 
});

这里描述的是普通按钮元素中的点击事件处理，但是您可以看到在其内容中执行了 submit()。

仅此描述，当点击按钮时，执行Form元素的提交过程。

通常点击Form元素中的提交按钮执行submit()过程，但也可以用其他按钮代替。

处理方法会根据 submit() 的参数“是”或“否”而略有变化，因此您可以习惯使用这两种方法！

结语

这次我们学习了如何使用jQuery的submit()方法提交表单！

基于以上内容，让我们尽自己最大的努力将其运用到编程中去吧！

本文来源：词雅网

本文地址：https://www.ciyawang.com/jquery-form-submit.html

本文使用「 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 」许可协议授权，转载或使用请署名并注明出处。

相关推荐

最近发表

标签列表

热门文章

搜索
返回顶部