Exemplo de chamada do WordPress Ajax [Exemplo de JS básico e de reação]
Publicados: 2021-04-04
Se você estiver procurando por um exemplo rápido e direto de chamada do WordPress Ajax, mostrarei rapidamente um dos exemplos que usei recentemente em um projeto WordPress react. Presumo que, se você estiver procurando por um exemplo de chamada do WordPress Ajax, já esteja familiarizado com o funcionamento do Ajax.
Ajax Um JavaScript síncrono e X ML
Se você não estiver familiarizado; AJAX = Um JavaScript síncrono e X ML é uma biblioteca que permite fazer solicitações ou enviar alguns dados para um servidor.
A solicitação AJAX pode ser um GET ou POST para um URL como o URL de administração do WordPress ou qualquer outro URL. Você pode adicionar parâmetros personalizados aos dados e manipulá-los para atender às suas necessidades.
A solicitação AJAX no WordPress é essencialmente usada para transferir os dados entre cliente e servidor sem recarregar ou atualizar a página.
Exemplo de chamada do WordPress Ajax
Por exemplo, em meu recente aplicativo WordPress react, preciso postar os dados do formulário abaixo em um servidor e criar um tipo de postagem personalizado.
Para enviar esses dados precisamos saber como funciona o WordPress Ajax e como estamos no front-end precisamos ter dois arquivos
- Arquivo JavaScript onde escreveremos o exemplo de chamada do WordPress Ajax
- Arquivo PHP que terá a função de receber os dados e processá-los.
Então, basicamente, aqui estamos fazendo apenas coisas de reboque; obtendo os dados do formulário usando JavaScript e enviando o formulário para o servidor. Podemos posteriormente processar os dados dentro da função php que
Exemplo de chamada do WordPress Ajax de ação do lado do cliente
No lado do cliente, o seguinte é o trecho de código que deve estar em seu arquivo JavaScript
$(document).on("click", ".submit-button", function (e) {
e.preventDefault();
var fd = new FormData($('#form-id');
fd.append( "action", 'example_function_to_process_data');
$.ajax({
type: 'POST',
url: object_handle.ajax_url, //defined with wp_localize function
data: fd,
success: function(data, textStatus, XMLHttpRequest) {
console.log(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
}
});
});
Exemplo de chamada do WordPress Ajax de ação do lado do servidor
No lado do servidor, simplesmente queremos criar a função que declaramos como a ação "action", 'example_function_to_process_data' e usá-la para processar os dados que recebemos da postagem de chamada Ajax.
Neste caso precisamos usar os dois hooks que são usados para front end Ajax e os nomes devem estar no mesmo padrão especificamente os hooks que a função callback pode ter nomes diferentes:
add_action( 'wp_ajax_example_function_to_process_data', 'example_function_to_process_data_request' ); add_action( 'wp_ajax_nopriv_example_function_to_process_data', 'example_function_to_process_data_request' );
Observe como acabei de prefixar os ganchos wp_ajax_ e wp_ajax_nopriv_ com a ação que declaramos no arquivo JS – "action", 'example_function_to_process_data' . Este é o truque para fazê-lo funcionar e você não deve ignorar esta parte.
Função de retorno de chamada de exemplo de chamada do WordPress Ajax
Agora podemos criar a função callback e processar os dados:
function example_function_to_process_data_request() {
$name = isset($_POST['name'])?trim($_POST['name']):"";
$response = array();
$response['message'] = "Ajax Call WordPress Example Successful Request";
echo json_encode($response);
exit;
}
Esta função registrará a mensagem no console e você verá que fez a chamada do WordPress Ajax com sucesso.
Exemplo de chamada do WordPress Ajax React JS
em meu projeto recente, como mencionei antes, fiz a chamada do Ajax usando o Axios no aplicativo React JS e WordPress. No react competente o seguinte foi o meu código
import { Component } from 'react';
import './App.css';
import axios from 'axios';
class App extends Component {
render() {
return (
<div className="App">
<ContactForm />
</div>
);
}
}
class ContactForm extends Component{
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
country: '',
city: '',
job: '',
}
}
handleFormSubmit( event ) {
event.preventDefault();
const reactAppData = window.wpRoomDesigner || {}
const { ajax_url} = reactAppData
let formData = new FormData();
formData.append('action', 'processAxioData');
formData.append('name', this.state.name)
formData.append('email', this.state.email)
formData.append('city', this.state.city)
formData.append('country', this.state.country)
formData.append('job', this.state.job)
// console.log(this.state);
/* Logging Form Data
for (var key of formData.entries()) {
console.log(key[0] + ', ' + key[1]);
} */
axios.post(ajax_url, formData).then(function(response){
console.log(response.data);
})
}
render(){
return(
<form>
<label>Name</label>
<input type="text" name="name" value={this.state.name}
onChange={e => this.setState({ name: e.target.value })}/>
<label>Email</label>
<input type="email" name="email" value={this.state.email}
onChange={e => this.setState({ email: e.target.value })}/>
<label>Country</label>
<input type="text" name="country" value={this.state.country}
onChange={e => this.setState({ country: e.target.value })}/>
<label>City</label>
<input type="text" name="city" value={this.state.city}
onChange={e => this.setState({ city: e.target.value })}/>
<label>Job</label>
<input type="text" name="job" value={this.state.job}
onChange={e => this.setState({ job: e.target.value })}/>
<input type="submit" onClick={e => this.handleFormSubmit(e)} value="Create Contact" />
</form>
);
}
}
export default App;
Aqui há 3 coisas importantes para lembrar, você pode ver que estou usando o objeto FormData, você precisa declarar a ação que é o nome da função que você usará no lado do servidor PHP.
Você também precisa declarar o ajax_url que você pode utilizar a função wp_localize_script() e, finalmente, você precisa passar os dados do formulário.
Conclusão
Neste post, analisamos o exemplo de chamada do WordPress Ajax e descrevemos como você pode fazer a mesma chamada em um aplicativo de reação do WordPress. Espero que isso ajude você a começar a fazer chamadas Ajax no WordPress. Se você tiver perguntas específicas para um desenvolvedor do WordPress, sinta-se à vontade para entrar em contato. Você também pode entrar em contato se estiver procurando por um desenvolvedor de reação do WordPress.