如何在不刷新页面的情况下发送表单 - How to send a form without refreshing the page

>我在Wordpress模板中制作了一个表单，该表单进行某些计算并在模式引导程序中显示结果。

.HTML：

 //FORM
<form method="post" id="myForm">   
 <span>Name</span><br><input type="text" name="name" id="name" required>
 <span>Email</span><br>
 <input type="email" name="email"  id="email" required>
 <span>Altura</span><br>
 <input type="number" name="altura" id="altura" required>
<span>Peso</span><br>
<input type="number" name="peso" id="peso" required>
   <br><br>
<button type="submit" id="enviar" onclick="calcularIMC();">Enviar</button>
 //MODAL
<div class="modal fade" id="ajax-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div id="corpo_modal">
                  <p> ALL FIELDS </p>
         </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
   </div>
  </div>
</div>

JAVASCRIPT：

function calcularIMC(){  
var nome = document.getElementById("nome").value; 
var email = document.getElementById("email").value; 
var estilo = document.getElementById("estilo").value; 
var experiencia = document.getElementById("experiencia").value; 
var altura = document.getElementById("altura").value; 
var peso = document.getElementById("peso").value;  
var resultado = 5;
var corpo = document.getElementById("corpo_modal");

var imc = 0;
if(altura >0 && peso >0){
  imc = peso / (altura * altura);
}

 if(estilo == "Surf"){            
         if((imc<=25) && (resultado == 5)){          
          corpo.innerHTML = '<img src="1.png" style="width: 150px; height:150px">';
        }
      else{         
         corpo.innerHTML = '<img src="2.png" style="width: 150px; height:150px">';
          }
     } 

  else if(estilo == "SUP"){  
        if((experiencia >= 3) && (imc <=29)){
          corpo.innerHTML = '<img src="3.png" style="width: 150px; height:150px">';
        } else{
          corpo.innerHTML = '<img src="4.png" style="width: 150px; height:150px">';
        }                       
     }
}

问题是当我发送表单时，它会更新页面并且不显示模态。
经过一番研究，我发现要解决这个问题，我需要使用 Ajax - jQuery.ajax。

我找到了这个代码：

$(function() {
  $('form#myForm').on('submit', function(e) {
      $.post('', $(this).serialize(), function (data) {
          // This is executed when the call to mail.php was succesful.
          // 'data' contains the response from the request
      }).error(function() {
          // This is executed when the call to mail.php failed.
      });
      e.preventDefault();
  });
});

当我在没有放入wordpress模板的情况下在单独的页面中创建表单时，它可以工作。但是当我将代码放入 wordpress 模板中时，它会在 3 秒后更新页面。

我还发现我可以在jquery中使用本机函数ajax，该函数$.ajax();，在自己内部，我使用url、type、data等标签。我是 Ajax 的初学者，我不知道该怎么做。

为什么当我放入wordpress模板时该功能e.preventDefaul();不起作用？有可能让它在wordpress模板中工作吗？

或

我如何使用$.ajax()来解决这个问题？

我想在不刷新页面的情况下发送表单！

在 javsacript 控制台中查看 Web 浏览器中的错误 f12

您可能会看到undefined variable "$"或类似的错误消息。

为了避免与其他JavaScript库发生冲突，WordPress默认调用jQuery noConflict。

最简单的解决方案是将代码包装在传入jQuery对象的 iife 中，并将其重新定义为$

(function($){
   console.log($);
   //your code
})(jQuery)

更多信息

Wordpress 有一个特殊的 url 来处理 ajax 请求，并期望一个操作字段，后端的函数应该被调用：

(function($){
    $(function() {
      $('form#myForm').on('submit', function(e) {
          var data = $(this).serialize();
          data += '&action=my_action'
          $.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function (response) {
            console.log(response)            
         }).error(function() {
             console.log('XHR error')
          });
          e.preventDefault();
      });
    });
})(jQuery)

然后，您将在函数.php文件中添加一个处理程序函数：

add_action( 'wp_ajax_my_action', 'my_action_callback' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action_callback' );
function my_action_callback() {
    global $wpdb; // this is how you get access to the database
    $whatever = intval( $_POST['whatever'] );
    $whatever += 10;
        echo $whatever;
    wp_die(); // this is required to terminate immediately and return a proper response
}

延伸阅读

https://codex.wordpress.org/AJAX_in_Plugins

如何从异步调用返回响应？

在wordpress中发布数据时，您应该在wordpress主题中的functions.php文件中处理请求。

在使用wordpress时，你不应该使用美元符号，用jQuery替换它，这将使你发布的代码像这样：

jQuery(function() {
  jQuery('form#myForm').on('submit', function(e) {
      $.post('', jQuery(this).serialize(), function (data) {
      }).error(function() {
          // This is executed when the call to mail.php failed.
      });
      e.preventDefault();
  });
});

功能.php

add_action( 'wp_ajax_[action]', 'my_function' );
function my_function() {
    var_dump($_POST);
}

[action] 占位符需要替换为与 ajax 调用匹配的操作，例如"my_action"

var data = {
    action: 'my_action',
    form: jQuery(this).serialize()
}
jQuery(function() {
    jQuery('form#myForm').on('submit', function(e) {
        $.post('', data, function(data) {
          }).error(function() {
        });
        e.preventDefault();
    });
});

Zkk，您实际上不需要提交任何内容...
这里有 2 个快速解决方案：

将输入类型更改为 button ;或
将以下内容添加到您的 JavaScript 标签中

：

var meuFormulario = document.getElementById("myForm");
meuFormulatio.onsubmit = function(event){
    event.preventDefault();
}

这将取消您的提交操作，仅运行您的 javascript 函数来计算您需要Índice de Massa Corporea (IMC);)