Question

我在Wordpress模板中创建一个表单，进行某些计算并在模态Bootstrap中显示结果。

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();
  });
});

当我在SEPARATE页面中创建表单而不放入wordpress模板时，它可以正常工作。但是，当我将代码放入wordpress模板时，它会在3秒后更新页面。

我还发现我可以在ajax中使用本机函数jquery，函数$.ajax();，在我自己内部使用url，{{1}等标签}，type等等。我是阿贾克斯的初学者，我对如何做到这一点感到很失望。

当我输入wordpress模板时，为什么函数data不起作用？它可以在wordpress模板中运行吗？

或

如何使用e.preventDefaul();解决此问题？

我想发送表单而不刷新页面！

Answer 1

在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();
  });
});

的functions.php

add_action( 'wp_ajax_[action]', 'my_function' );

function my_function() {
    var_dump($_POST);
}

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

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();
    });
});

Answer 2

在您的网络浏览器中查看javsacript控制台中的错误 f12

您可能会看到MainActivity或类似的错误消息。

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

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

更多信息

Wordpress有一个特殊的URL用于处理ajax请求，并期望一个 action 字段，应该调用后端的函数：

(function($){

   console.log($);
   //your code

})(jQuery)

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

(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)

进一步阅读

https://codex.wordpress.org/AJAX_in_Plugins

How do I return the response from an asynchronous call?

Answer 3

ZKK，你实际上不需要提交任何东西......
这里有2个快速解决方案：

将您的输入类型更改为button;或
将以下内容添加到您的javascript代码

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

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

如何在不刷新页面的情况下发送表单

3 个答案: