form表单submit成功后执行回调

在form表单中提交的时候，可以使用JavaScript来执行回调函数。可以在form表单中添加一个onsubmit属性，然后在该属性中指定一个JavaScript函数，该函数会在form表单成功提交后被执行。例如：

<form action="submit.php" method="post" onsubmit="myFunction()">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

<script>
function myFunction() {
  alert("Form submitted");
}
</script>

在这个例子中，当用户点击submit按钮提交表单时，会先执行myFunction函数，该函数弹出一个提示框，显示"Form submitted"。然后表单会被提交到submit.php文件进行处理。

相关问题

layui的form表单submit提交

### 回答1：
layui的form表单submit提交是指使用layui框架中的form模块，通过form.on('submit', function(data){})方法来监听表单提交事件，然后在回调函数中获取表单数据并进行处理，最后通过ajax等方式将数据提交到后台进行处理。这种方式可以有效地避免表单重复提交等问题，提高了表单提交的安全性和可靠性。

### 回答2：
layui是一款前端框架，主要用于简化和美化前端开发过程中的UI设计和交互效果。其中，form表单是网页中必不可少的元素之一，通过表单可以获取用户输入信息，提交到后台服务器进行数据处理。

在layui中，form表单有一个submit()方法，可以用于将表单提交到后台服务器。该方法会触发form元素的submit事件，并将表单所有可提交的元素的值序列化，并附加到HTTP请求的数据体中。

使用示例：

layui.form.on('submit(formDemo)', function(data){
// data.field为表单数据
layer.msg(JSON.stringify(data.field));
return false; // 防止表单跳转
});

该示例中，formDemo是表单的lay-filter属性值，表示该表单的标识符。在触发submit事件后，会执行回调函数中的代码。其中，data.field为表单数据，可以通过JSON.stringify()方法将其转换成字符串后进行展示。

为了避免表单提交后页面跳转，可以在回调函数中使用return false语句，阻止默认的表单提交事件。

总之，layui的form表单submit提交方法非常方便和实用，在前端开发过程中可以大大提高代码的效率和可读性。

### 回答3：
layui是一个非常流行的前端UI库，它提供了方便快捷的表单提交方法，其中最常用的就是form表单的submit提交。

首先，我们需要在HTML中引入Layui的form模块，如下所示：

<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">

然后，在需要提交的form表单中添加lay-submit属性，如下所示：

<form class="layui-form" lay-filter="example" lay-submit>
  <!--此处省略表单元素-->
  <button class="layui-btn" lay-submit lay-filter="form-submit">提交</button>
</form>

在表单中，我们可以看到lay-submit和lay-filter这两个属性。其中lay-submit代表这个表单将使用Layui的提交方法进行提交，lay-filter则是这个表单的过滤器名，方便我们在JavaScript中进行操作。

接下来，我们需要使用Layui的form模块来监听表单的submit事件，如下所示：

layui.use('form', function(){
  var form = layui.form;
  
  //监听表单提交事件
  form.on('submit(form-submit)', function(data){
    //在这里编写表单提交的具体逻辑
    return false;
  });
});

在监听表单提交事件中，我们使用了form.on()方法，它接收两个参数，第一个参数表示事件的名称，第二个参数表示事件的回调函数。在这个例子中，我们监听了lay-filter属性为form-submit的按钮的点击事件，点击按钮后回调函数中的data参数会包含表单的数据，我们可以在这里编写表单提交的逻辑。需要注意的是，由于我们使用了Layui的表单提交方法，所以最后要在事件回调函数中返回false，防止表单元素传统跳转提交。

除了按钮的点击事件之外，我们还可以在表单元素中使用事件监听器，如下所示：

<form class="layui-form" lay-filter="example" lay-submit>
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" id="username">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" id="password">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="form-submit">提交</button>
    </div>
  </div>
</form>
<script>
layui.use(['form', 'layer'], function(){
  var form = layui.form;
  var layer = layui.layer;
  
  //监听用户名输入框失去焦点事件
  form.on('blur(username)', function(data){
    var username = data.value;
    //在这里可以对用户名进行检验逻辑
  });
  
  //监听密码输入框得到焦点事件
  form.on('focus(password)', function(data){
    //在这里可以显示密码强度检测
  });
  
  //监听表单提交事件
  form.on('submit(form-submit)', function(data){
    //表单提交逻辑
    return false;
  });
});
</script>

在这个例子中，我们在输入框中分别使用了on()方法来监听失去焦点和得到焦点事件，这些事件的名称就是对应的输入框的name属性值。在这些事件的回调函数中，我们可以编写输入框特定的逻辑，比如对用户名进行检验或者显示密码强度等等。

总之，Layui的表单提交方法非常方便实用，能够充分满足我们前端开发的需要。当然，在实际使用中还要注意表单元素的验证和数据的安全问题，这部分内容有待进一步学习。

form表单提交form.submit方法怎么获取返回值

在JavaScript中，当使用`<form>`表单并调用`submit()`方法时，通常浏览器会自动发送请求到服务器处理数据，而不是直接返回一个值给客户端。这是因为`submit()`方法是用于实际提交表单，而非获取响应。

如果你想在表单提交后获取服务器的返回数据，你应该通过监听`onsubmit`事件，并阻止表单的默认提交行为。然后你可以使用`fetch`、`XMLHttpRequest`（AJAX）或其他库如jQuery的`.ajax()`方法来发送异步请求，并在回调函数中处理服务器响应。例如：

// 使用addEventListener阻止默认提交
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单立即提交

  // 发送POST请求
  fetch('/api/data', {
    method: 'POST',
    body: new FormData(this), // 或者 JSON.stringify(formData)
    headers: { 'Content-Type': 'application/json' } // 如果是JSON
  })
  .then(response => response.json()) // 根据返回内容解析
  .then(data => console.log('服务器返回:', data))
  .catch(error => console.error('请求错误:', error));
});

在这个例子中，`response.json()`会将服务器返回的数据转换成JSON格式，然后你可以在.then块中处理这个数据。注意，服务器返回的具体格式取决于你们的API设计。